html+vlc 播放多视频
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>
<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>
html+vlc 播放多视频的更多相关文章
- VLC播放RTSP视频延迟问题 (转)
原帖地址:http://blog.chinaunix.net/uid-26611383-id-3755283.html ======================================== ...
- VLC播放RTSP视频延迟问题
VLC播放RTSP视频延迟问题 配置 VLC 以播放 RTSP/RTP 流 实测发现RTP都不如TCP快? vlc播放rtp封装的h.264延时很大是什么原因? 开启打印: VLC的工具->消息 ...
- 使用vlc播放器播放rtsp流视频
可参考: 使用vlc播放器做rtsp服务器 web网页中使用vlc插件播放相机rtsp流视频 使用vlc进行二次开发做自己的播放器 首先需要安装vlc播放器,下载及安装步骤略 使用vlc播放器播放rt ...
- Android内嵌VLC实现播放网络视频，网络音频
1.在对应模块的build.gradle文件中,添加依赖 //VlC implementation "de.mrmaffen:vlc-android-sdk:2.0.6" 2.布局 ...
- Qt编写的RTSP播放器+视频监控(vlc版本)
几天写了个ffmpeg版本,今天特意抽空改写个vlc版本,之前vlc播放视频后,被接管了不能识别到鼠标,需要重新编译vlc源码得到支持鼠标消息的版本. /*** vlc视频播放类 作者:feiyang ...
- 网页调用vlc并播放网络视频
环境:windows/android/ios windows端保存以下内容为reg文件并运行 Windows Registry Editor Version 5.00 [HKEY_CLASSES_RO ...
- .NET 使用 VLC 播放视频
使用 VLC 播放监控有几个月了,现在是多个项目中都有用到.在使用的过程中也有一些细节供大家参考. 一.对 VLC 的了解 VLC 是一个开源的跨平台多媒体播放器及框架. VLC 官方出的有播放器.编 ...
- 使用vlc播放器做rtsp流媒体服务器
可参考: 使用vlc播放器播放rtsp视频 web网页中使用vlc插件播放相机rtsp流视频 使用vlc进行二次开发做自己的播放器 首先需要安装vlc播放器,下载及安装步骤略 使用vlc播放器做rts ...
- Android VLC播放器二次开发1——程序结构分析
最近因为一个新项目需要一个多媒体播放器,所以需要做个视频.音频.图片方面的播放器.也查阅了不少这方面的资料,如果要从头做一个播放器工作量太大了,而且难度也很大.所以最后选择了VLC作为基础,进行二次开 ...
随机推荐
- 二段式fsm
1.推荐在敏感表下的默认状态为X,这样描述的好处有2个: 好处1:仿真易观察bug. 好处2:综合对不定态X的处理是"Don't Care",即任何没有定义的状态寄存器向量都会被忽 ...
- docker：安装mysql
文章来源:https://www.cnblogs.com/hello-tl/p/9234429.html 1.添加镜像 docker pull mysql 2.在/data下新建文件夹mysql,进入 ...
- Android开发——子线程操作UI的几种方法
在Android项目中经常有碰到这样的问题,在子线程中完成耗时操作之后要更新UI,下面就自己经历的一些项目总结一下更新的方法: 在看方法之前需要了解一下Android中的消息机制. 转载请标明出处:h ...
- java 邮箱验证
1.需要加入发送邮件的mail.jar: http://www.oracle.com/technetwork/java/javamail/index-138643.html 2.将字符串通过MD5进行 ...
- centos 安装 yum apt
以下地址 http://download.csdn.NET/detail/mimi00x/8081263 执行安装命令 rpm -i rpmforge-release-0.5.3-1.el7.rf.x ...
- [转]pickle python数据存储
python的pickle模块实现了基本的数据序列和反序列化.通过pickle模块的序列化操作我们能够将程序中运行的对象信息保存到文件中去,永久存储:通过pickle模块的反序列化操作,我们能够从文件 ...
- D. Billboard
D. Billboard Time Limit: 8000ms Case Time Limit: 8000ms Memory Limit: 32768KB 64-bit integer IO fo ...
- 组合数学的卡特兰数 TOJ 3551: Game of Connections
这个就是卡特兰数的经典问题 直接用这个公式就好了,但是这个题涉及大数的处理h(n)=h(n-1)*(4*n-2)/(n+1) 其实见过好几次大数的处理了,有一次他存的恰好不多于30位,直接分成两部分l ...
- 【软考2】Java语言的基本知识汇总
导读:现在对于java这一模块,还没有相应的项目经验,只是通过各种类型的资料,对java有一个面上的了解.现在,对此做一个罗列总结,在以后的学习过程中,逐步完善! 一.语言的发展 1.1,机器语言 在 ...
- shell文件包含
像其他语言一样,Shell 也可以包含外部脚本,将外部脚本的内容合并到当前脚本. Shell 中包含脚本可以使用: . filename 或 source filename 两种方式的效果相同,简单起 ...