video.js 一个页面同时播放多个视频

$(data).each(function(i, item) {
            // innerHTML += ‘<li type-id="‘+item.id+‘">‘+
            //              ‘<img src="‘+(item.imgs?item.imgs:‘../../img/videoBg1.jpg‘)+‘" >‘+
            //              ‘<p>‘+item.name+‘</p>‘+
            //              ‘</li>‘;
            innerHTML += ‘<li type-id="‘ + item.id + ‘">‘ +
                // ‘<img src="‘+(item.imgs?item.imgs:‘../../img/videoBg1.jpg‘)+‘" >‘+
                ‘<video style="width:100%;height:100%;" id="example_video_‘ + item.id + ‘" class="videoClass video-js vjs-default-skin vjs-big-play-centered" autoplay="autoplay" controls muted><source src="‘ + item.hls + ‘" type="application/x-mpegURL">‘ +
                ‘</video>‘ +
                ‘<p>‘ + item.name + ‘</p>‘ +
                ‘</li>‘;
            //视频实时播放
            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);需要做个延时,避免加载失败

原文地址:https://www.cnblogs.com/Byme/p/10025784.html

时间: 2024-10-17 07:32:06

video.js 一个页面同时播放多个视频的相关文章

JS 一个页面关闭多个页面

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title></head><body> <input type=

video.js使用教程API

videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本. 最新的3.1.0版本优化了之前的做法,只需要提供两个格式的视频,页面制作起来更加方便,只有两步走:1.引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站<link href="http://vjs.zencdn.net/c/video-js.css" rel

Video.js 简单的使用介绍

vedio.js 是一款视频播放插件,它会自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.下面来介绍下它的使用: 引用video-js.cs样式文件和video.js <link href="video-js.css" rel="stylesheet" type="text/css"> <script src="video.js"></script

Video.js --视频播放插件使用

vedio.js 是一款视频播放插件,它会自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.下面来简单介绍下它的简单使用: 引用video-js.cs样式文件和video.js <link href="video-js.css" rel="stylesheet" type="text/css"> <script src="video.js"></sc

html页面引用video.js播放m3u8格式视频

//head里面的内容,我是采用cdn引用的方式,因为项目太小 //只粘贴了不分代码,都是主要的,只要视频没问题,如果不能播放,建议换一个视频源,代码绝对没问题 都可以播放,下面video样式那里,一共三层, <head> <meta charset="utf-8" /> <title>二级造价</title> <script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.

video.js 动态获取URL 并播放youtube视频

怎样使用VIDEO这里就不说了 这里主要播放YOUTUBE视频 <script src="https://cdn.bootcss.com/video.js/7.5.4/video.js"></script> <script src="https://cdn.bootcss.com/videojs-youtube/2.6.0/Youtube.js"></script> //弹窗 <video id="my

用js在网页上完成倒计时3秒后自动跳转到另一个页面

<body> <div id="time"></div> <a href="#" onclick="stop()">停止</a> <script type="text/javascript"> var i=3; function changeTime(){ document.getElementById("time").innerHTM

video.js播放rtmp

项目中要用到rtmp直播和点播.要求:点播能够调整播放进度 开始用腾讯提供的播放器,老卡,画质差,很多时候播不出来,rtmp点播还不能快进. 后来用Wowza自带的flash rtmp播放器,有源码 尝试修改源码,发现他的前端js和后端flash都没有交互,没写过as,分享大,又太耗时,果断pass... jwplayer rtmp播放好像也是要商业授权,最后选用了video.js 下载地址:https://github.com/videojs/video.js/releases 发现 V6.X

解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

想播放hls协议的就是m3u8文件,video.js原生不支持,官方有个插件videojs-contrib-hls 直接进入即可: <script src="__PUBLIC__/lib/video-js/videojs-contrib-hls.min.js"></script> 今天纠结了一天,调试到最后发现原来是跨域的问题: 如果使用阿里云OSS存储的话(别的服务器设置头部可访问即可),在跨域设置中做如下设置即可: 跨域问题:https://help.ali