官方简介《倒霉熊》是一部出自韩国人之手的可爱的北极熊幽默搞笑短片。也是孩子们的喜爱，学习知识的动漫天堂方法/步骤1在百度输入“倒霉熊第三季”点百度一下2进行网页搜索就会出现【倒帮宙霉熊第三季(动画片)-动漫-全集在线观看孝久择-爱奇艺】字样选择播放视频页面：下图3或者在百度输入“倒霉熊第三部”点百度一下4在出现的网页中再选择、倒霉熊(第3季)_高清视频在线观看_百度视频 ，字样点激进入板喝播放视频5可提供给你“多个网页选择播放”真的很方便哦！6点“追剧后”会出现在你的百度个人中心日程表中。下图“此处出现方便下次收看”位置END注意事项点“追剧后”会出现在你的百度个人中心日程表中经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。展开阅读全部相关标签百度'); (window.slotbydup=window.slotbydup
[]).push({ id: '5572142', container: s, size: '580,90', display: 'inlay-fix' }); })();}

video.js 一个页面同时播放多个视频的实例代码发布时间：2020-08-23 22:57:43来源：脚本之家阅读：265作者：小角色Byme具体代码如下所述：$(data).each(function(i, item) {// innerHTML += ''+
// ''+// ''+item.name+''+
// '';
innerHTML += '' +
// ''+'' +'' +'' + item.name + '' +
'';
//视频实时播放setTimeout(function() {var myPlayer = videojs('example_video_' + item.id);videojs('example_video_' + item.id).ready(function() {var myPlayer = this;myPlayer.play();});}, 5000);});引入video.css 和video.js 为前提调用主要是setTimeout(function() {var myPlayer = videojs('example_video_' + item.id);videojs('example_video_' + item.id).ready(function() {var myPlayer = this;myPlayer.play();});}, 5000);需要做个延时，避免加载失败总结以上所述是小编给大家介绍的video.js 一个页面同时播放多个视频的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
}

废话不多说下载并引用import videojs from "video.js"; import "video.js/dist/video-js.css"; import "videojs-contrib-hls";video js插件是跟据他来插入dom进行视频的渲染 data() { return { timeMU: null, videoOptions: { autoplay: true, muted: true, //默认情况下消除任何音频 controls: true, poster: "", sources: [ { src: "", type: "application/x-mpegURL", }, ], }, player: [], //存储video 实列 vldeoArr: [], channelIds: [], //id 用来获取视频 imgUrl: require("@/assets/no-photo.png"), }; },下面我把我的代码全部贴出,说一下我页面的逻辑我这个也页面是用的组件写法,获取父组件获取来的videoList视频列表,根据视频列表的channelId来进行mutiRtspAndM3u8接口请求返回过来的是视频的url地址但是后端有问题mutiRtspAndM3u8这个接口咩有处理好,就是说我传入9个channelId按道理他应该给我9个视频的url.....但是重点来了他返回来的有一下集中可能,一,返回来data里面只有3个,还有6个没有返回来..并且data里面的3个里面不一定都有url.可能有,可能没有,如果没有的话就接着发送这个请求,直到获取到,或者就是跳转到下一页就取消定时器...下面是我视频播放的方法 // 视频播放 async getMuVideo(ids) { let _this = this; await mutiRtspAndM3u8(ids, this).then((res) => { this.$nextTick(async () => { // 清除m3u8定时器 if (this.timeMU) { clearInterval(this.timeMU); this.timeMU = null } let arr = res.data.data; let bool = true; //用来判断 url 是否全部有值 let urlArr = []; arr.forEach((item, index) => { if (item.visitUrl) { // 拿到所有的url去和视频列表里面判断,如果视频列表里面的是离线OFFLINE就改为在线ONLINE状态 _this.videoList.forEach((v) => { // && v.status == "OFFLINE" if (item.channelId == v.channelId) { // v.status = "ONLINE"; v.loading = false; if(v.status != "OFFLINE"){ } // this.getVideoList() // 因为上一步有了url视频地址,虽然这次判断更改了dom的显示,但是还是无法赋值url } }); this.$nextTick(() => { let videoOptions = JSON.parse( JSON.stringify(this.videoOptions) ); videoOptions.sources[0].src = _this.GLOBAL.BASE_URL + item.visitUrl; let dom = "'; this.$refs["videoDiv" + item.channelId][0].innerHTML = dom; this.$forceUpdate(); this.player.push( videojs("video" + item.channelId, videoOptions) ); }); } else { bool = false; urlArr.push(Number(item.channelId)); } }); // channelIds 与 返回来的视频不匹对。那就把剩余的id再去发送请求 if (this.channelIds.length != arr.length) { let muidArr = arr.map((item) => Number(item.channelId)); let idArr = this.getArrDifference(this.channelIds, muidArr); urlArr = [...idArr, ...urlArr]; // console.log(urlArr); } if (!bool this.channelIds.length != arr.length) { let arr = urlArr.map((item) => { return { channelId: item, }; }); // console.log(arr); this.channelIds = urlArr; this.timeMU = null this.timeMU = setInterval(async () => { await this.getMuVideo(arr); }, 3000); } }); }); },然后那又有一个需求,在videoList视频列表有离线和在线状态,html上根据videoList视频列表返回来的data判断显示视频和不显示视频 离线状态里没有cideo标签就无法展示视频意思是我9个channelId里面有离线的和没离线的都去请求了,渲染的时候肯定是离线是没办法渲染上的,然后我根据判断假如离线的channelId为5,5的url回来了,我就把videoList的离线状态改成在线,然后在线的html就有video标签了,...现在问题来了,这个判断是在有这个5的url时候进行判断的,所以他已经有url了已经用video js插入dom进行渲染了就算if了也是无法显示,所以逻辑有问题,没法进行.搞不懂为啥离线的也要发送请求,接通视频后撒撒刷新页面不就可以了下面我把带吗全部贴出看你们可以看的懂吗,然后销毁这个video js标签也有问题,解决是插入daom元素 不喜勿喷,多交流多探讨}