【实用】JavaScript中Video使用详解过程（多视频列表循环播放）

做过一个项目里有用到插入多个视频类似列表循环播放的，视频信息是从后台数据库传入的

核心JS代码片段

<script type="text/javascript">var videoArray=new Array();var relative = '${liveSetting.attachUrl}'var posterUrl = '../../'+relative;var liveUrl = '${liveSetting.liveUrl}';var isLive = '${liveSetting.isLive}';//从后台传入多条视频信息存入到数组中<c:forEach items="${mergeMovies}" var="info"> videoArray.push("${info.postUrl}");</c:forEach> var option={controls: true,//autoplay: true,preload: 'auto',poster:posterUrl,loop: false //注意：此地方一定要设置为false，不然会循环播放同一个视频}var myPlayer = videojs('example_video_1',option,function () {var curr = 0;if(isLive == 0){//直播时间段this.src({type:'video/mp4',src:liveUrl});}else{//非直播时间段videoPlayer()this.on("ended",function() {//监听当前视频是否播放完毕videoPlayer()// this.src("<%=path%>/"+videoArray[curr]);// this.load();// this.play();// curr++;// if(curr >= videoArray.length){//      curr = 0; //重新循环播放//  } });}function videoPlayer(){var curr = 0;var video = document.getElementById("example_video_1_html5_api");video.src="<%=path%>/"+videoArray[curr];video.load();video.play();curr++;if(curr >= videoArray.length){curr = 0; //重新循环播放}}});

更多video使用方法请参考video.js API文档

【实用】JavaScript中Video使用详解过程（多视频列表循环播放）相关推荐

JavaScript中getBoundingClientRect()方法详解
JavaScript中getBoundingClientRect()方法详解 getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bo ...
JavaScript中的this详解
前言 this JavaScript中的this详解 this详解 This的指向有几种情况?如何人为控制? [谁调用this,this指向谁!!] [this的指向,不关心this写在哪 ...
91.video.ws index php_如何利用videojs实现视频列表循环播放（完整代码）
本篇文章给大家带来的内容是关于如何利用videojs实现视频列表循环播放(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 庭审直播 .video-js { /* posit ...
JavaScript中e.keycode详解
概述学过javascript(简称js)的朋友应该都知道e.keycode事件在网页中有着重要作用,下面分享一下关于e.keycode的具体应用和详解实例 1.获取按下的键盘按键Unicode值: ...
JavaScript中的定时器详解
前言 JavaScript 中有两种定时器: setTimeout():指定时间后执行一段代码(延迟执行). setInterval():每隔一段时间执行一段代码(间隔执行). 下面单独对两种计时器进 ...
JavaScript中的正则表达式详解
正则表达式(Regular Expression)是一门简单语言的语法规范,是强大.便捷.高效的文本处理工具,它应用在一些方法中,对字符串中的信息实现查找.替换和提取操作. 正则表达式在人们的印象中可 ...
JavaScript中setAttribute用法详解
setAttribute基本用法 element.setAttribute(attributename,attributevalue) setAttribute() 方法添加指定的属性,并为其赋指定的 ...
javascript中强制类型转换详解+总结
javascript中一共有六种类型:Number,String,Boolean,Undefined,Object,function.可以用typeof来查看声明的变量的类型.注意,typeof是操作 ...
JavaScript中Window.event详解
event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromEleme ...

【实用】JavaScript中Video使用详解过程（多视频列表循环播放）

【实用】JavaScript中Video使用详解过程（多视频列表循环播放）相关推荐

最新文章

热门文章