利用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自动播放下一个的更多相关文章

  1. JavaScript一个页面中有多个audio标签，其中一个播放结束后自动播放下一个，audio连续播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. [开发技巧]·HTML检测输入已完成自动填写下一个内容

    [开发技巧]·HTML检测输入已完成自动填写下一个内容 个人网站 --> http://www.yansongsong.cn 在上一个博客中简易实现检测输入已完成,我们实现了检测输入已完成,现在 ...

  3. Android播播放完SD卡指定文件夹音乐之后，自动播放下一首

    最近做一个项目,需要连续播放音乐,播放完一首歌之后,自动播放完下一首歌.不要重复播放. 代码如下: package com.example.asyncplayer_ex; import java.io ...

  4. [C#]Winform下回车或Tab键自动切换下一个控件焦点

    满足用户体验,在数据录入时,能在输入完一个信息后通过回车或Tab键自动的切换到下一个控件(字段). 在界面控件设计时,默认可以通过设置控件的TabIndex来实现.但在布局调整时或者是对输入的内容有选 ...

  5. ip输入框键入.或者合法数字自动选择下一个输入框效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  6. JAVA设计方法思考之如何实现一个方法执行完毕后自动执行下一个方法

    今天编程时,突然想起来在一些异步操作或Android原生库的时候,需要我们实现一些方法, 这些方法只需要我们具体实现,然后他们会在适当的时候,自动被调用! 例如AsyncTask,执行玩doInBac ...

  7. 当input框输入到限定长度时，自动focus下一个input框

     需求背景 需要输入一串15位的数字,但是要分为3个输入框,每个输入框限定长度5位,当删除当前输入框的内容时,focus到上一个输入框: 实现方法 var field = $('.phone-fiel ...

  8. EasyNVR H5无插件摄像机直播解决方案前端解析之：引用videojs无法自动播放

    关于videojs自动播放问题 播放流媒体多使用videojs来进行播放,videojs,本身自带自动播放属性: 通过添加autoplay(),来完成视频播放的自动加载: player = video ...

  9. H5页面音频自动播放问题

        最近有这么一个需求,需要在手机加载一个页面的时候,自动播放音乐资源.一般情况下,这个问题也就解决了,但是要保证各种手机上表现一致,那就相当困难了,至少要费点儿周折.       下面有三种常规 ...

随机推荐

  1. Win10利用CodeBlocks搭建Objective-C开发环境（一）

    为了学习ios开发,而手头没有苹果机,若在windows平台下学习objective-c编程.则需要安装OC开发环境, 经过在网上查阅各种相关资料,历经多次失败,终于安装并测试成功,特将安装过程和经验 ...

  2. 【ARM-LInux开发】利用scp 远程上传下载文件/文件夹

    利用scp 远程上传下载文件/文件夹 scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o s ...

  3. 高级UI-自定义Behavior

    Behavior本身是一个抽象类,可以用于两个view之间的状态监听,也可用于某个view监听CoordinateLayout里面的所有控件滑动状态,实现自定义Behavior则可以实现任意两个vie ...

  4. javascript bom操作

    BOM BOM介绍 全称 Browser Object Mode 浏览器对象模式 操作浏览器的API接口.比如浏览器自动滚动 Windows对象的顶层部分是BOM的顶层(核心)对象,所有的对象都是通过 ...

  5. Echarts 不能百分比显示或显示有问题

    1,设折线图宽为100%(如:容器div的class=“RiBarBot”宽为880px),刚初始化时隐藏折线图(或后期刷新.隐藏与显示折线图时),当点击显示折线图时,获取到的宽只有100px,并不是 ...

  6. poj 1852&3684 题解

    poj 1852 3684 这两题思路相似就放在一起. 1852 题意 一块长为L长度单位的板子(从0开始)上有很多只蚂蚁,给出它们的位置,它们的方向不确定,速度为每秒一长度单位,当两只蚂蚁相遇的时候 ...

  7. 利用Python进行数据分析 第7章 数据清洗和准备（2）

    7.3 字符串操作 pandas加强了Python的字符串和文本处理功能,使得能够对整组数据应用字符串表达式和正则表达式,且能够处理烦人的缺失数据. 7.3.1 字符串对象方法 对于许多字符串处理和脚 ...

  8. 二十四、V4L2框架主要结构体分析和虚拟摄像头驱动编写

    一.V4L2框架主要结构体分析 V4L2(video for linux version 2),是内核中视频设备的驱动框架,为上层访问视频设备提供统一接口. V4L2整体框架如下图: 图中主要包括两层 ...

  9. Bootsrap表格表单及其使用方法

    bootstrap的使用 bootstrap中的js插件依赖于jQuery 因此jQuery要在bootstrap之前引入 参考官网标准引入方法和引入样式 排版 标题 Bootstrap和普通的HTM ...

  10. Linux下 sftp服务配置

    查看openssh的版本,使用ssh -V 命令来查看openssh的版本,版本必须大于4.8p1,低于的这个版本需要升级. 参考博客:https://yq.aliyun.com/articles/6 ...