关于JavaScript接入常见视频协议并实现在网页播放的方法（基于西瓜视频播放器插件）

一、安装插件

npm install xgplayer

二、引入

import FlvPlayer from “xgplayer-flv.js”

三、初始化

initPlayer() {
            let _this = this;
            if (!this.url) return console.warn("url is not esist");
            const config = {
                id: this.id,
                url: this.url,
                fluid: true,
 
                //playsinline: true,
                isLive: true,
                cors: true,
                /**倍速播放 */
                playbackRate: [0.5, 0.75, 1, 1.5, 2],
                defaultPlaybackRate: 1,
                playsinline: this.isAppleDevice(), // IOS设备设置，防止被浏览器劫持
                "x5-video-player-type": "h5", // 微信内置浏览器设置，防止被浏览器劫持
                "x5-video-orientation": "portraint",
                /**画中画 */
                pip: false,
                thumbnail: {
                    height: 25,
                },
                pipConfig: {
                    bottom: 0,
                    right: 0,
                    width: 320,
                    height: 80,
                },
                // download: true,
                /**初始化首帧 */
                videoInit: true,
                autoplay: true,
                autoplayMuted: true,
                screenShot: {
                    saveImg: true,
                    quality: 0.92,
                    type: "image/png",
                    format: ".png",
                },
                // 菜单控件
                controlPlugins: [],
            };
            //========================== 2，开始实例化======================
            const player = new FlvPlayer(config);
 
            if (player) {
                this.player = player;
                // this.player.getCssFullscreen()
                //
                // setTimeout(()=>{
                //   this.player.exitCssFullscreen()
                // },5000)
                /* 这里注册监听 */
                // this.player.once('complete', () => {
                //   console.log('complete')
                //   try {
                //     this.player.play() // 尝试再次执行播放
                //     setTimeout(() => { // 500毫秒收检测
                //       if (!this.player.hasStart && this.player.currentTime ===
                //           0) { // hasStart返回false，并且播放时间还是0，那么就可以认为自动播放失效了
                //
                //       }
                //     }, 500)
                //   } catch (e) {
                //     console.log(e);
                //   }
                // });
                // 监听视频开始播放 播放传给父组件的是true
                this.player.on("play", () => {
                    this.$emit("triggerEvent", true);
                });
                // 监听视频已经暂停 暂停传给父组件的是true
                this.player.on("pause", () => {
                    this.$emit("triggerEvent", false);
                });
                // 视频加载失败，报错误提示
                this.player.on("error", () => {
                    console.log("视频加载错误，请确认视频地址后再连接!");
                    //this.$message.warning('视频加载错误，请确认视频地址后再连接!');
                });
                // 监听 视频退出全屏
                // this.player.on('exitFullscreen', () => {
                //   window.scrollTo(0, 0);
                //   console.log('已经退出全屏了');
                // });
 
                //检测画面是否卡死。如果decodedFrames不再发生变化,就销毁掉该实例并进行重新连接。
                this.player.on("statistics_info", function (res) {
                    if (_this.lastDecodedFrame == 0) {
                        _this.lastDecodedFrame = res.decodedFrames;
                        return;
                    }
                    if (_this.lastDecodedFrame != res.decodedFrames) {
                        _this.lastDecodedFrame = res.decodedFrames;
                        _this.sameCount = 0;
                    } else {
                        _this.sameCount++;
                        console.log(
                            "decodedFrames没有发生变化第",
                            _this.sameCount,
                            "次。时间：",
                            new Date()
                        );
 
                        if (_this.sameCount > 9) {
                            //decodedFrames10秒不变，则判断为画面卡死，销毁实例进行重连
                            console.log(
                                "画面卡死，进行重连————————player:",
                                _this.player,
                                ".时间",
                                new Date()
                            );
                            //重置变量
                            _this.lastDecodedFrame = 0;
                            _this.sameCount = 0;
 
                            if (_this.player) {
                                _this.player.destroy(); //销毁
                                _this.getData(); //重连
                                console.log("重连完毕");
                            }
                        }
                    }
                });
            }
        },

四、其他

扩展插件：
1、 xgplayer-flv

npm i -S xgplayer-flv
import Player from ‘xgplayer’
import FlvPlugin from ‘xgplayer-flv’
import “xgplayer/dist/index.min.css”

new Player({
    id:'dom-id',
    isLive: true,
    plugins: [FlvPlugin],
    url: 'test.flv',
})

2、 xgplayer-hls

npm i -S xgplayer-hls
import Player from ‘xgplayer’
import HlsPlugin from ‘xgplayer-hls’

new Player({
    plugins: [HlsPlugin]
})

3、xgplayer-mp4

npm i xgplayer-mp4@version --save
npm i xgplayer@version --save
import Player from “xgplayer”
import Mp4Plugin from “xgplayer-mp4”
import “xgplayer/dist/xgplayer.min.css”

const player = new Player({
    url,
    id,
    autoplay: true,
    height: window.innerHeight,
    width: window.innerWidth,
    plugins: [Mp4Plugin],
    mp4plugin: {
        maxBufferLength: 30,
        minBufferLength: 10,
        reqOptions:{
            mode: 'cors',
            method: 'POST',
            headers: { // 需要带的自定义请求头
                'x-test-header': 'rrrr'
            },
        }
    }
})

五、补充HLS.js

HLS.js是一种JavaScript库，用于实现HTTP Live Streaming（HLS）协议的客户端解析和播放

安装： npm i hls.js

html播放hls

<html lang="en">
    <head>
        <meta charset=utf-8/>
    </head>
    <body>
 
        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://127.0.0.1:9090/live/a.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>
 
    </body>
</html>

1. loadSource(url): 加载该URL地址对应的视频流，并根据HLS协议解析流的数据（加载.m3u8文件路径）
2. attachMedia(vedio): 在video元素上附加MSE