一个页面播放多个视频
一个页面播放多个视频
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>videojs视频播放:video.xxx</title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<body>
<h1>video.xxx</h1>
<div id='video-div'></div>
</body>
</html>
<script>
var data = [{"id":"1", "name":".mp4", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..mp4", "type":"video/mp4"},{"id":"2", "name":".m3u8", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..m3u8", "type":"application/x-mpegURL"},{"id":"3", "name":".ts", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..ts", "type":"video/MP2T"},{"id":"4", "name":".avi", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..avi", "type":"video/x-msvideo"},{"id":"5", "name":".wmv", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..wmv", "type":"video/x-ms-wmv"},{"id":"6", "name":".flv", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..flv", "type":"video/x-flv"},{"id":"7", "name":".flv", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..ogg", "type":"video/ogg"},{"id":"8", "name":".mov", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..mov", "type":"video/quicktime"}];
var html = '';
$(data).each(function(i, item) {html += '<li type-id="' + item.id + '">' +'<h2>' + item.name + '</h2>' +// '<img src="'+(item.imgs?item.imgs:'../../img/videoBg1.jpg')+'" alt="">'+ // autoplay="autoplay"'<video style="width:100%;height:100%;" id="example_video_' + item.id + '" class="videoClass video-js vjs-default-skin vjs-big-play-centered" controls muted><source src="' + item.url + '" type="' + item.type + '">' +'</video>' +'</li></br><hr></br>';//视频实时播放setTimeout(function() {var myPlayer = videojs('example_video_' + item.id);videojs('example_video_' + item.id).ready(function() {var myPlayer = this;myPlayer.play();});}, 5000);});document.getElementById("video-div").innerHTML=html;setTimeout(function() {var myPlayer = videojs('example_video_' + item.id);videojs('example_video_' + item.id).ready(function() {var myPlayer = this;myPlayer.play();});}, 5000); </script>
一个页面播放多个视频相关推荐
- web页面播放优酷视频，播放html5视频，兼容ie7 vcastr22.swf播放
一:vcastr22.swf播放本地视频 1.下载vcastr22.swf 把播放插文件放到服务器文件夹. 2.代码如下 红色路径是你自己服务器的路径 可以用最简单的 文件夹/文件夹/文件夹/xx.M ...
- vue关于videojs一个页面多个视频且一个播放器多个视频源的写法（播放m3u8视频格式的视频监控）
前言 突然接到一个任务是需要做一个视频回放,而且是监控视频那种. 1.首先需要能播m3u8视频 npm install --save video.js npm install --save video ...
- 【大华摄像机hls拉流vue使用videojs展示 一个页面多个视频同时播放】
前言 主要参考https://blog.csdn.net/qq_39923762/article/details/89149715?spm=1001.2014.3001.5506 我们的项目是在大华摄 ...
- ＜a＞链接下载视频 而不是打开新页面播放
开发中我们常用<a标签>链接下载数据, 非常好用.但是在下载视频的时候 会遇到无法下载 转而打开新页面播放的bug 其实, 查看该响应的headers你就会发现, 它的 Response ...
- html点击a标签弹层播放视频,html中点击a标签视频在新页面播放
今天刚好需要做一个点击视频,需要在新页面打开播放.一看到这里,我第一想法就觉得很简单啊,直接一个a标签,里面给一个target为blank,href值为视频播放地址不就好了.想好就开始干,当这样做完之 ...
- html中点击a标签视频在新页面播放
今天刚好需要做一个点击视频,需要在新页面打开播放.一看到这里,我第一想法就觉得很简单啊,直接一个a标签,里面给一个target为blank,href值为视频播放地址不就好了.想好就开始干,当这样做完之 ...
- 图片合成视频+php,将视频和图片合成到一个页面
2017-12-19 柒儿 15:53:09 柒儿 15:53:18 下载的软件安不上 怎么办 柒儿 15:54:46 在不? 柒儿 15:54:49 急 狸窝宝典 15:56:20 重启电脑试下 狸 ...
- html图片合成视频,将视频和图片合成到一个页面
2017-12-19 柒儿 15:53:09 柒儿 15:53:18 下载的软件安不上 怎么办 柒儿 15:54:46 在不? 柒儿 15:54:49 急 狸窝宝典 15:56:20 重启电脑试下 狸 ...
- 如何在HTML5页面播放加密视频
如何在HTML5页面播放加密视频 - Polyv blog 如何在HTML5页面播放加密视频 Polyv移动端加密默认是可以直接支持HTML5浏览器播放的,如果担心视频在移动端被下载, 需要在Poly ...
- 一个页面同时使用两个video标签自动播放在各个移动端浏览器存在的问题
双video标签(一个为背景,一个屏幕居中展示)在各大浏览器中存在的问题: 移动端 一.安卓端: 1.华为自带浏览器:两个视频可以同时自动播放,但自动播放时默认都是静音播放. 2.百度浏览器:上方视频 ...
最新文章
- 小谈多生成树协议--MSTP
- Basic INFO - InstallScript脚本编程的限制
- TypeScript strictness - 严格语法检查
- apk去除签名验证工具安卓版_App 签名过期或泄露怎么办？别担心，Google 已经给出解决方案！...
- python-万能函数装饰器
- MySQL 执行原生sql
- python实现对指定字符串补足固定长度倍数截断输出
- c语言中按键程序设计,c语言获得键盘的按键
- 【指纹识别】基于matlab GUI指纹识别【含Matlab源码 586期】
- SpringMVC实现ajax上传图片实时预览
- python适合女生吗-女孩纸适合做数据分析吗？
- 全网舆情资讯舆情系统网址
- MEMORY系列之“DRAM概述”
- Xilinx HLS 学习笔记1
- Android实例精讲——通过ListView构造微信聊天界面视图
- 自建CA然后颁发证书给搭建的httpd用
- 计算机科学与技术光学成像专业,光信息科学与技术专业就业方向有哪些
- 关于QPainter无法绘制问题
- 【Flink】学习笔记-20200302更新
- 普通人学python有什么用 ？学好了能干什么