利用videojs自动播放下一个
利用videojs自动播放下一个
一、总结
一句话总结：
在视频放完的ended方法里面，指定video的src，然后this.play()放视频就好
vue来控制视频的链接也是蛮不错的
this.on('ended',function(){
i++;
if(i >= list.length){
i = 0;
}
var videoObj = list[i];
this.src({type: videoObj.type, src: videoObj.url});
this.play();
})
二、利用videojs实现视频列表循环播放，自动播放下一个
转自或参考：利用videojs实现视频列表循环播放，自动播放下一个
https://blog.csdn.net/kenhins/article/details/82625100
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>庭审直播</title>
<link rel="stylesheet" href="css/base.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="js/vue/dist/vue.js"></script>
<link rel="stylesheet" href="js/iview/dist/styles/iview.css">
<script src="js/iview/dist/iview.min.js"></script>
<!--引入播放器样式-->
<link href="js/videojs/css/video-js.min.css" rel="stylesheet">
<!--引入播放器js-->
<script src="js/videojs/js/video.min.js"></script>
<script src="js/videojs/js/videojs-flash.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.video-js {
/* position: inherit !important; */
}
.video{
width:50%;
padding:0px !important;
float:left;
}
.video-div{
float:left;
width:45%;
margin-left: 35px;
background:#3e3b3b00;
}
.dp-center{
background: #403f3f;
}
.video-list{
margin: 5px 10px 10px 10px;
padding: 5px 0px;
max-height: 330px;
list-style: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.video-list li {
float: left;
margin: 0;
padding-left:15px;
width: 175px;
height: 140px;
}
.text_align_center{
text-align:center;
color:#fff;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="app" class="dp-item dp-item-3">
<div class="dp-item_center">
<div class="dp-tit">
<div class="dp-tit-btn btn6">
庭审直播
</div>
</div>
<!-- 简介 -->
<div class="dp-center">
<div class="video">
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered">
<!-- <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv"> -->
</video>
</div>
<div class="video-div">
<ul class="video-list">
<li v-for="(item,index) in listItem">
<a id="video1" href="#" title="民间借贷纠纷">
<img v-bind:src="[item.image]" width="120px" height="80px" border="0">
<div class="video_list_explain text_align_center">{{item.title}}</div>
<div class="video_list_date text_align_center">{{item.dateTime}}</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
videojs.options.flash.swf = 'js/videojs/swf/video-js.swf';
var vm = new Vue({
el: '#app',
data: {
visible: false,
listItem:[
{title:"民间借贷纠纷1",isplay:false, type:"video/mp4", url: "http://www.w3school.com.cn/example/html5/mov_bbb.mp4", image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg", dateTime:"2018-09-10 16:30"},
{title:"民间借贷纠纷2", isplay:false, type:"video/mp4", url: "video/video.mp4",image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg", dateTime:"2018-09-10 16:30"},
{title:"民间借贷纠纷3", isplay:false, type:"video/mp4", url: "http://7xn4dt.com1.z0.glb.clouddn.com/migo_vedio_720.mp4", image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg",dateTime:"2018-09-10 16:30"},
{title:"民间借贷纠纷4", isplay:false, type:"video/mp4", url: "video/video.mp4",image:"http://vod.videoincloud.com/jsxzxyfy/20180910/55pXgd/55pXgd_m_1.jpg", dateTime:"2018-09-10 16:30"},
]
},
mounted:function(){
this.show();
},
filters: {
formatDate: function (value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
}
},
methods: {
show: function () {
this.visible = true;
}
}
});
var list = vm.listItem;
var i = 0;
$(function(){
var source = document.getElementById("video-source");
var player = videojs("my-player", {
"width":"450px",
"height":"282px",
"poster":"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg",
"autoplay":true,
"controls": true,
"sources": [{
src: list[i].url,
type: list[i].type
}],
}, function(){
this.on('loadeddata',function(){
})
this.on('ended',function(){
i++;
if(i >= list.length){
i = 0;
}
var videoObj = list[i];
this.src({type: videoObj.type, src: videoObj.url});
this.play();
})
});
});
</script>
</body>
</html>效果图：
利用videojs自动播放下一个的更多相关文章
- JavaScript一个页面中有多个audio标签，其中一个播放结束后自动播放下一个，audio连续播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [开发技巧]·HTML检测输入已完成自动填写下一个内容
[开发技巧]·HTML检测输入已完成自动填写下一个内容 个人网站 --> http://www.yansongsong.cn 在上一个博客中简易实现检测输入已完成,我们实现了检测输入已完成,现在 ...
- Android播播放完SD卡指定文件夹音乐之后，自动播放下一首
最近做一个项目,需要连续播放音乐,播放完一首歌之后,自动播放完下一首歌.不要重复播放. 代码如下: package com.example.asyncplayer_ex; import java.io ...
- [C#]Winform下回车或Tab键自动切换下一个控件焦点
满足用户体验,在数据录入时,能在输入完一个信息后通过回车或Tab键自动的切换到下一个控件(字段). 在界面控件设计时,默认可以通过设置控件的TabIndex来实现.但在布局调整时或者是对输入的内容有选 ...
- ip输入框键入.或者合法数字自动选择下一个输入框效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- JAVA设计方法思考之如何实现一个方法执行完毕后自动执行下一个方法
今天编程时,突然想起来在一些异步操作或Android原生库的时候,需要我们实现一些方法, 这些方法只需要我们具体实现,然后他们会在适当的时候,自动被调用! 例如AsyncTask,执行玩doInBac ...
- 当input框输入到限定长度时，自动focus下一个input框
需求背景 需要输入一串15位的数字,但是要分为3个输入框,每个输入框限定长度5位,当删除当前输入框的内容时,focus到上一个输入框: 实现方法 var field = $('.phone-fiel ...
- EasyNVR H5无插件摄像机直播解决方案前端解析之：引用videojs无法自动播放
关于videojs自动播放问题 播放流媒体多使用videojs来进行播放,videojs,本身自带自动播放属性: 通过添加autoplay(),来完成视频播放的自动加载: player = video ...
- H5页面音频自动播放问题
最近有这么一个需求,需要在手机加载一个页面的时候,自动播放音乐资源.一般情况下,这个问题也就解决了,但是要保证各种手机上表现一致,那就相当困难了,至少要费点儿周折. 下面有三种常规 ...
随机推荐
- web端自动化——selenium3用法详解
selenium中文学习文档链接:https://selenium-python-zh.readthedocs.io/en/latest/getting-started.html selenium3+ ...
- Vue + ElementUI的电商管理系统实例03 用户列表
1.通过路由展示用户列表页 新建user文件夹,里面新建Users.vue文件: <template> <div> <h3>用户列表组件</h3> &l ...
- mysql 中不等于过滤 null 的问题（同时比较等于，大于和小于）
在写 SQL 条件语句是经常用到 不等于'!='的筛选条件,此时要注意此条件会将字段为 null 的数据也当做满足不等于的条件而将数据筛选掉. 1.原始数据和表结构 CREATE TABLE `tes ...
- 《ucore lab1 exercise6》实验报告
资源 ucore在线实验指导书 我的ucore实验代码 题目:完善中断初始化和处理 请完成编码工作和回答如下问题: 中断描述符表(也可简称为保护模式下的中断向量表)中一个表项占多少字节?其中哪几位代表 ...
- [bzoj4240]有趣的家庭菜园_树状数组
有趣的家庭菜园 题目链接:https://lydsy.com/JudgeOnline/problem.php?id=4240 数据范围:略. 题解: 第一步比较简单,只需要排序之后,每个数不是在左边就 ...
- [转帖]实时流处理系统反压机制（BackPressure）综述
实时流处理系统反压机制(BackPressure)综述 https://blog.csdn.net/qq_21125183/article/details/80708142 2018-06-15 19 ...
- awk简单使用
1.awk格式 awk [ 切割符号 ] ' [ / pattern/ ] 函数语句 ' [ 文件名 ] 2.输出对应列 $0 全部 , $1 第一列 ,$2 第二列 ...... a ...
- AVR单片机教程——闪烁LED
上次我们把LED点亮了.你可能已经试过把 LED_RED 换成其他灯,也可能已经用 led_on() 把所有LED一起点亮了.但是LED点亮以后,程序就退出了,之后LED一直没有暗,直到没有供电.这一 ...
- hdu 2586 欧拉序+rmq 求lca
题意:求树上任意两点的距离 先说下欧拉序 对这颗树来说 欧拉序为 ABDBEGBACFHFCA 那欧拉序有啥用 这里先说第一个作用 求lca 对于一个欧拉序列,我们要求的两个点在欧拉序中的第一个位置之 ...
- javascript 之 扩展对象 Object.assing
语法:Object.assign(target,...source) 说明:Object.assign方法的第一个参数是目标对象,后面的参数都是源对象 一.以对象为参数的合并 1.第一个参数都是对象, ...