video.js播放m3u8或者flv格式的推流直播

最新推荐文章于 2025-04-02 19:15:55 发布

思绪万千133

最新推荐文章于 2025-04-02 19:15:55 发布

阅读量3.2k

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/u013611033/article/details/116737797

版权

//asyncAddTool 动态的将外部js插入到body底部,并且返回Promise,js下载完成返回true
export default url => {
  //页面上是否已经有了一样的文件,如果有则不再引入
  const AllscriptTags = document.querySelectorAll("script");
  for (let index = 0; index < AllscriptTags.length; index++) {
    const element = AllscriptTags[index];
    if (element.src === url) {
      return Promise.resolve(true);
    }
  }
  return new Promise(function(resolve, reject) {
    const el = document.createElement("script"); // 创建 script 元素
    el.src = url; // url 赋值
    el.async = false; // 保持时序
    const loadCallback = function() {
      // 加载成功回调
      el.removeEventListener("load", loadCallback);
      resolve(true);
    };
    const errorCallback = function(evt) {
      // 加载失败回调
      el.removeEventListener("error", errorCallback);
      //   var error = evt.error || new Error("Load javascript failed. src=" + url);
      resolve(false);
    };
    el.addEventListener("load", loadCallback);
    el.addEventListener("error", errorCallback);
    document.body.appendChild(el); // 节点插入
  });
};


let player=null ,//播放器实例
//播放器相关
const initVideo=async ()=>{
    //video.js主文件  videojs版本7.5左右,过于高版本hls不匹配了
    const videoState = await asyncAddTool(
            "https://cdn.bootcdn.net/ajax/libs/video.js/7.5.6/video.min.js"
    );

    //以下脚本用于支持flv格式直播,如果不需要flv,可以不加载
    const flvState = await asyncAddTool(
            "https://unpkg.com/flv.js/dist/flv.min.js" //flvjs
    )
    const flvvideojs = await asyncAddTool(
            'https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js' //videoflvjs
    )
    //判断是否全部下载完成
    const fileState = [videoState, hlsState, flvState, flvvideojs].every(
            state => state === true
    );
    if(fileState){
       player = videojs('#videoplay', {//两个参数 video标签元素 相关配置
                    poster:poster,//海报
                    playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
                    language: 'zh-CN',
                    notSupportedMessage: "此视频暂时无法播放,请稍后再试",
                    controls: true,
                    techOrder: ['html5', 'flvjs'], //html5模式和flvjs模式
                    fluid:true,//流式布局,适应父元素大小
                    flvjs: { //配置flv相关信息 如果播放flv才配置这个
                      mediaDataSource: {
                        isLive: true, //是否是直播
                        cors: true,//是否跨域
                        withCredentials: false,//是否跨站检测
                     },
                    preload: true,//预加载
                    autoplay: true,//是否自动播放

        });
        const res= awite getVideoLiveUrl() //获取直播间的直播地址
        player.src({
               src: res.data.data.m3u8,
               type: 'application/x-mpegURL', //m38u格式直播推流设置
               //type: "video/x-flv" .//flv格式播放
               //type:"video/mp4" ,//普通mp4格式播放
        );
    }
    
}

注意
//如果需要播放rtmp,需要另外下载videojs-flash,不过现在各大浏览器开始启用flash,所以并不推荐
//Video.js 7之前的版本 必须使用videojs-http-streaming.js插件才可以播放HLS,7以后的版本默认捆绑VHS,可以直接播放hls,videojs-contrib-hls被弃用,所以直接上7.5以上版本