Vue2.x中使用EasyDarwin/EasyPlayer.js

1,088 阅读1分钟
  1. 由于项目需要播放H265的视频回放,而部分插件兼容没那么好,找来找去,后面就试试使用EasyPlayer-pro.js(这里踩了个坑:EasyPlayer.js好像是不支持H265的视频流的,而且它还有npm的依赖包,是5.11版本的,我虽然按网上的教程操作了,但是视频播放不了,折腾了蛮久,后面才发现有EasyPlayer-pro.js才支持H265播放的)。但是,这个插件不能直接使用npm安装使用,所以项目暂时通过引入静态js库的方式调用。
  2. 文章后面附上github的示例地址。
  3. 在github上找到官网提供的示例,复制js文件夹下的所有文件到项目的static下,并在index.html下引入。

ee.png

<script defer type="text/javascript" src="./static/easyplayer-pro/easyplayer-pro.js"></script>

<div class="easyPlayer" id="easyPlayer" style="width:100%;height:100%;"></div>

var easyplayer = null;
playCreate() {
    let _this = this;
    var container = document.getElementById("easyPlayer");
    easyplayer = new EasyPlayerPro({
        container: container,
        decoder: "../../../static/easyplayer-pro/decoder-pro.js",
        videoBuffer: 0.5, // 缓存时长
        isResize: false,
        text: "",
        loadingText: "loading...",
        // debug: true,
        // debugLevel: 'debug',
        useMSE: true,
        useSIMD: false,
        useWCS: true,
        isMulti: false,
        useSIMD: false,
        muted: false,
        hasAudio: true,
        showBandwidth: false, // 显示网速
        showPerformance: false,
        // isNotMute: true,//	是否渲染音频
        operateBtns: {
            //操作按钮
            fullscreen: true,
            screenshot: false,
            play: true,
            audio: true,
            record: false,
            quality: false,
            performance: false,
        },
        // watermarkConfig: {// 水印
        //   text: {
        //     content: 'easyplayer-pro'
        //   },
        //   right: 10,
        //   top: 10
        // },
        playbackForwardMaxRateDecodeIFrame: 1,
        isWebrtcForOthers: true,
        demuxUseWorker: true,
        supportHls265: true,
    });

    easyplayer.on("play", function () {
        console.log("easyplayer play");
        _this.loadFinishType = true;
    });
    //easyplayer.on("error", function (type, msg) {
    //   console.log("easyplayer error:", type, msg);
    //});
    easyplayer.on("pause", function (info) {
        console.log("easyplayer videoInfo", info);
    });
    //   easyplayer.on('playbackPreRateChange', (rate) => {
    //     easyplayer.forward(rate);
    //   })
    // easyplayer.on('playbackSeek', (data) => {
    // 	easyplayer.setPlaybackStartTime(data.ts);
    // })
},
onPlayer(url){
    easyplayer.play(url)
}

视频正常播放了!

但是,还发现了个问题,easyplayer.on("error",function(){}),这个error的回调方法没回调,就是视频播放完了,网络报404了,也还是没有回调!各位使用过的小伙伴要是知道这个问题,请多指出。

github文档: github.com/EasyDarwin/…