//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以上版本