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作为基础,进行二次开 ...
随机推荐
- RN性能
https://facebook.github.io/react-native/docs/performance.html 一个使用RN而不是webView的重要原因是可实现60fps以及更类似原生a ...
- verilog behavioral modeling--blocking and nonblocking
BLOCKIN ...
- 【ios】IOS返回3824错误
后台接口数据返回有NULL格式的数据
- windows终端输入pip install requests报错：Fatal error in launcher
emm今天群友发了个图,说他的pip报错,是这个问题 emmm这个问题我也不太懂,后来让他pip install requests这样操作,, 还是不管用,我寻思这个错咋回事,让他用 python ...
- day18-python之迭代器和生成器
1.文件处理模式b模式 #!/usr/bin/env python # -*- coding:utf-8 -*- # f=open('test.py','rb',encoding='utf-8') # ...
- Python面向对象(成员)(二)
1. 成员 在类中你能写的所有内容都是类的成员 2. 变量 1. 实例变量: 由对象去访问的变量. class Person: def __init__(self, name, id, gender, ...
- 对uboot中CFG_和CONFIG_的理解
CONFIG_用于选择CPU SOC 板子的类型,系统时钟,设备驱动driver驱动等 CFG_用于设置malloc缓冲池的大小,偏移地址部分的定义,uboot的提示符,uboot的加载地址,fl ...
- Knockout v3.4.0 中文版教程-12-控制文本内容和外观-html绑定
3. html绑定 目的 html绑定会使关联的DOM元素显示你参数指定的html内容. 当你的视图模型里面的值是HTML标记字符串,而你想要呈现它,这时候用html绑定特别合适. 例子 <di ...
- appium之android_uiautomator定位
前言 appium就是封装android的uiautomator这个框架来的,所以uiautomator的一些定位方法也可以用 text 1.通过text文本定位语法 new UiSelector() ...
- vim 第三章 插入模式
vim 第三章 插入模式 在普通模式下可以删除 复制 及粘贴的命令 在插入模式下也存在以中方便快捷的方式 能够粘贴寄存器中文本 两种方式来插入键盘上不存在的非常用字符 替换模式 ...