EasyPlayer.js H5播放器,是一款能够同时支持HTTP、HTTP-FLV、HLS(m3u8)视频直播与视频点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、wasm等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器。
- 引入
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的根目录(一定要根目录)
- 在 html 中引用 EasyWasmPlayer.js
<div style="width:600px;height: 400px; background-color:pink;margin: auto;"> <div id="newplay"></div> </div>
- 直播与回放
//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!