EasyPlayer.js直播与回放功能视频开发实战过程记录

简介: EasyPlayer.js直播与回放功能视频开发实战过程记录

EasyPlayer.js H5播放器,是一款能够同时支持HTTP、HTTP-FLV、HLS(m3u8)视频直播与视频点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、wasm等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器。

  1. 引入
    copy EasyWasmPlayer.js 到项目中;
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
    <script src="EasyWasmPlayer.js"></script>


copy libDecoder.wasm到项目或者www的根目录(一定要根目录)

  1. 在 html 中引用 EasyWasmPlayer.js
<div style="width:600px;height: 400px; background-color:pink;margin: auto;">
    <div id="newplay"></div>
</div>


  1. 直播与回放
 //API地址;
    var apiUrl = 'http://139.***.***.***:10000/';
    //鉴权参数;
    var data = {
        username: 'admin***',
        password: md5('admin'),
    }
    //获取Token;
    $.getJSON(apiUrl + "api/v1/login", data, function (data, status) {
        if (status == "success") {
            //console.log(data.Token);
            //直播流调用;
            $("#stream").click(function () {
                getStream(data.Token);
            });
            //直播流调用;
            $("#playback").click(function () {
                getPlayBack("2020-12-29T00:00:00", "2020-12-29T11:00:00", data.Token);
            })
        } else {
            console.log("鉴权参数传递错误,无法获取数据!");
        }
    })
    //直播视频流;
    function getStream(token) {
        var channelData = {
            serial: '34020000001320000005',
            code: '34020000001320000001',
            token: token
        };
        //视频回调函数;
        var callbackfun = function (e) {
            //console.log(e);
        }
        // 实例播放器
        var player = new WasmPlayer(null, 'newplay', callbackfun, {
            Height: true
        })
        //构建直播流;
        var url1 = apiUrl + "api/v1/stream/start";
        $.getJSON(url1, channelData, function (data) {
            //console.log(data);
            player.play(data.HLS, 1);
        })
    }
    //回放功能;
    function getPlayBack(starttime, endtime, token) {
        var channelData = {
            serial: '34020000001320000005',
            code: '34020000001320000001',
            starttime: starttime,
            endtime: endtime,
            token: token
        };
        //视频回调函数;
        var callbackfun = function (e) {
            //console.log(e);
        }
        // 实例播放器
        var player = new WasmPlayer(null, 'newplay', callbackfun, {
            Height: true
        })
        //录像回放;
        var url1 = apiUrl + "api/v1/playback/start";
        $.getJSON(url1, channelData, function (data) {
            //console.log(data);
            player.play(data.HLS, 1);
        })
    }

Done!


相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
46 1
|
7天前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
22天前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
16天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
23天前
|
Web App开发 JavaScript 前端开发
Node.js开发
Node.js开发
39 13
|
17天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
1月前
|
存储 JavaScript 前端开发
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
27天前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
|
1月前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
在这篇文章中,我们将一起探索Node.js的奇妙世界。无论你是刚接触后端开发的新手,还是希望深化理解的老手,这篇文章都适合你。我们将从基础概念开始,逐步深入到实际应用,最后通过一个代码示例来巩固所学知识。让我们一起开启这段旅程吧!
|
26天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带领读者从零基础开始,一步步深入到Node.js后端开发的精髓。我们将通过通俗易懂的语言和实际代码示例,探索Node.js的强大功能及其在现代Web开发中的应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的见解和技巧,让你的后端开发技能更上一层楼。