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>
           

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);
        })
    }