html+vlc 播放多视频
2017-07-20 19:35
141 查看
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频剪辑</title>
</head>
<body>
<div style="width:100%">
<div style="width:30%;float:left">
<object type='application/x-vlc-plugin' id='vlc_1' events='True' width="360" height="270" codebase="axvlc.cab">
<param name='mrl' value='http://118.85.193.213/mobi/vod/vod_pub/st02/2015/07/28/Q1M_2020878286.3gp' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
</object>
測试计时<span id="span_1"></span>秒
</div>
<div style="width:30%;float:left">
<object type='application/x-vlc-plugin' id='vlc_2' events='True' width="360" height="270" codebase="axvlc.cab">
<param name='mrl' value='http://118.85.193.213/mobi/vod/vod_pub/st02/2015/07/28/Q600_2020877459.3gp' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
</object>
測试计时<span id="span_2"></span>秒
</div>
<div style="width:30%;float:left">
<object type='application/x-vlc-plugin' id='vlc_3' events='True' width="360" height="270" codebase="axvlc.cab">
<param name='mrl' value='http://118.85.193.213/mobi/vod/vod_pub/st02/2015/07/28/Q350_2020877450.3gp' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
</object>
測试计时<span id="span_3"></span>秒
</div>
<div style="width:30%;float:left">
<object type='application/x-vlc-plugin' id='vlc_4' events='True' width="360" height="270" codebase="axvlc.cab">
<param name='mrl' value='http://118.85.193.213/mobi/vod/vod_pub/st02/2015/07/28/M200_2020877455.3gp '/>
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
</object>
測试计时<span id="span_4"></span>秒
</div>
<div style="width:30%;float:left">
<object type='application/x-vlc-plugin' id='vlc_5' events='True' width="360" height="270" codebase="axvlc.cab">
<param name='mrl' value='http://118.85.193.213/mobi/vod/vod_pub/st02/2015/07/28/Q200_2020877449.3gp' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
</object>
測试计时<span id="span_5"></span>秒
</div>
<div style="width:30%;float:left">
<object type='application/x-vlc-plugin' id='vlc_6' events='True' width="360" height="270" codebase="axvlc.cab">
<param name='mrl' value='http://118.85.193.213/mobi/vod/vod_pub/st02/2015/07/28/M100_2020877452.3gp' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
</object>
測试计时<span id="span_6"></span>秒
</div>
</div>
</body>
</html>
js代码
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> var vlcArray=new Array() $(function() { for(var i=1;i<7;i++){ var vlc_id="vlc_"+i; var obj = new vlcObject(); obj.vlc=document.getElementById(vlc_id); vlcArray.push(obj); } begin(); }) function begin(){ for(var i=1;i<7;i++){ var index=i-1; obj=vlcArray[index]; //state =3 表示正在播放 if(obj.vlc.input.state==3){ if (obj.isPlay==1){ //观看时长赋值 obj.seeTime=(new Date().getTime() - obj.beginTime)/1000+obj.stopTime; } else{ obj.isPlay=1; obj.beginTime=new Date().getTime(); obj.stopTime=obj.seeTime; } } //state =4 表示暂停播放;state =5 表示停止播放 state =2 表示缓冲 if (obj.vlc.input.state==4 || obj.vlc.input.state==5 || obj.vlc.input.state==2){ obj.isPlay=0; } setSeeTime(obj,i); } setTimeout("begin()",1000); } function setSeeTime(obj,id){ var span_id="#span_"+id; $(span_id).html(parseInt(obj.seeTime)); } //自己定义vlc对象 function vlcObject() { var temp = new Object; temp.vlc = new Object; //观看时长 temp.seeTime=0; //開始播放时间 temp.beginTime=0 temp.isPlay=0; //暂停前观看的时长 temp.stopTime=0; return temp; } </script>
自己生成axvlc.cab方法
现成的axvlc.cab包
相关文章推荐
- html+vlc 播放多视频
- C#读取,修改,保存HTML文件(C#窗体Treeview控制HTML中的VLC的视频播放列表)
- Android 如何调用vlc直接播放对应视频
- Qt+VLC播放多个视频的Demo
- html基础学习之视频播放
- VLC播放隔行视频
- 200分 android-vlc播放视频
- 嵌入式 vlc从接收到数据流到播放视频的过程分析(经典)
- dedecms、html、php、asp.net网页播放视频
- iOS使用MobileVLCKit播放rtsp视频流
- HTML嵌套Flash播放视频
- VLC播放RTSP视频延迟问题
- 使用vlc解决在web上点击播放ts格式视频
- HTML5 音频播放 <audio> 视频<video>
- 使用VLC及live555实现网页播放视频或mp3
- mac下用vlc播放视频去掉讨厌的黑屏
- 多浏览器兼容flv视频播放HTML
- WKWebView 使用HTML 播放本地视频
- JQuery播放暂停HTML视频
- Vlc播放rtsp视频