VLC在web系统中应用（x-vlc-plugin 即如何把VLC嵌入HTML中）第一篇
VLC毫无疑问是优秀的一款播放软件，子B/S机构的web项目中，如果能把它嵌入页面，做页面预览或者其他，是非常棒的。
第一步：下载VLC安装程序；（推荐1.0.3或者是1.0.5版本，比较稳定）
http://download.videolan.org/pub/videolan/vlc/
第二步：安装；（我实在XP上做测试滴，linux下面有测试过。。。）
注意选中Mozilla插件，不然Firefox下就不能使用VLC控件啦（ActiveX插件是IE下的，我就是在IE下测试的）
第三步：页面编码（我也不说废话啦，直接上代码）
页面1：test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点播测试</title>
<script type="text/javascript" charset="UTF-8">
var vdUrl =""; // 播放路径（定义为全局变量，给子页面播放控件提供播放路径）
function showDialog(type){
vdUrl="E:\\太极宗师06.avi";
var temp=document.getElementsByName('fileName')[0].value;
if(temp==''){
alert('请选择一个有效的本地视频文件，或者输入网络视频地址...');
return;
}
vdUrl=temp;
eventCode="XXXX";
if(type==1){
var winObj=window.open('./empty_play.html','play',
'height=640, width=740,toolbar=yes, menubar=yes, scrollbars=no, resizable=no,location=no, status=no');
}else if(type==2){
var winObj=window.open('./play.html','play',
'height=640, width=740,toolbar=yes, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
}
}
</script>
</head>
<body>
<input type="file" name="fileName" style="width: 350px">
<input type="button" value=" 播 放 " onclick="showDialog(1);">
<br>
<span style="color: red;font-weight: bold;font-size: 14px">提示：</span>
<span style="color: blue;font-weight: normal;font-size:
14px">请选择本地视频或者输入一个网络视频路径（建议先通过VLC media player播放通过）。</span>
</body>
</html>
页面2：empty_play.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频剪辑</title>
<script type="text/javascript" charset="UTF-8">
<!-- 屏蔽右键
// document.oncontextmenu=function(e){return false;}
//-->
var vlc; // VLC对象
var itemId; // 播放列表中播放节目的id
var vlcSound; // vlc音量大小（初始化默认为50）
var videoLength; // 视频总时长
var then_time; // 播放开始时间(播放开始的日期，看下面实现代码，它是毫秒哦)
var isPlaying=0; // 是否播放状态 （0 未播放 1 播放）
// 初始化 === 很重要哦，控制程序的入口
function initPlayUrl(){
vlc=document.getElementById("vlc");
// 添加播放地址
//vlc.playlist.add(window.opener.vdUrl);
// 播放
// vlc.playlist.play();
// 添加播放地址方式2 -- 推荐用下面的方法控制播放列表
var vedio_url=window.opener.vdUrl;
itemId= vlc.playlist.add(vedio_url);
vlc.playlist.playItem(itemId);
// 获取VLC当前音量
vlcSound=vlc.audio.volume;
// 设置VLC音量值
document.getElementById("vlc_sound").value=vlcSound;
// 播放按钮不可用
document.getElementById("play_button").disabled=true;
// 检查播放节目的状态 -- 注意这个是延时操作哦（setTimeout以毫秒为单位，这里延时0.5秒）
setTimeout(checkVedioStatus,500);
}
// 检查播放节目的状态
function checkVedioStatus(){
if(vlc.input.state>2 && vlc.input.state<5){
isPlaying=1;
// vlc.input.time 当前播放时长，单位毫秒
// vlc.input.length 节目总时长，单位毫秒
videoLength=parseInt(vlc.input.length/1000);
var temp_total_time=parseTime(videoLength);
// 总时长设置
document.getElementById("vedio_length").value=temp_total_time;
// 当前可以输入时间段跳转
document.getElementById("time_change").disabled=false;
// 获得当前系统时间
then_time=new Date().getTime();
// 计算当前播放时间点
checkTime();
}else{
// 如果不是播放状态就在延时执行
setTimeout(checkVedioStatus,500);
}
}
// 实时检测系统时间，计算视频的播放时长（典型的秒表功能）
function checkTime(){
if(isPlaying==1){
setTimeout("checkTime();",50);
var temp_time=parseInt((new Date().getTime() - then_time)/1000);
document.getElementById("current_video_time").value=parseTime(temp_time);
}
}
// 改变播放地址
function changeNewBeginTime(){
// vlc.input.time 获取当前播放时间（毫秒）/也可重设当前播放时间点
var jumpTime=document.getElementById("change_length").value;
if(jumpTime!=""){
if(jumpTime>videoLength){
alert("对不起，输入值大于视频总时长...");
return;
}
vlc.input.time=jumpTime*1000;
then_time=new Date()-jumpTime*1000;
}
}
// 把秒转换为时间格式（HH：mm：ss）
function parseTime(numLength){
var h_time=0;
var m_time=0;
var s_time=0;
if(numLength>=60){
m_time=parseInt(numLength/60);
s_time=parseInt(numLength%60);
}else{
s_time=numLength;
}
if(m_time>=60){
h_time=parseInt(m_time/60);
m_time=parseInt(m_time%60);
}
if(h_time<10){
h_time="0"+h_time;
}
if(m_time<10){
m_time="0"+m_time;
}
if(s_time<10){
s_time="0"+s_time;
}
return h_time+":"+m_time+":"+s_time;
}
// 停止播放
function stopPlay(){
vlc.playlist.stop();
isPlaying=0;
// 修改播放/停止按钮状态
document.getElementById("play_button").disabled=false;
document.getElementById("stop_button").disabled=true;
// 修改跳转按钮的状态
document.getElementById("change_length").value="";
document.getElementById("time_change").disabled=true;
// 当前视频播放时间点清空
document.getElementById("current_video_time").value="";
}
// 重新播放
function repeatPlay(){
vlc.playlist.play();
setTimeout(checkVedioStatus,500);
// 修改播放/停止按钮状态
document.getElementById("play_button").disabled=true;
document.getElementById("stop_button").disabled=false;
}
// 静音
function noSound(){
if(vlcSound>0){
vlcSound=0;
}
vlc.audio.toggleMute();
vlcSound=vlc.audio.volume;
document.getElementById("vlc_sound").value=vlcSound;
if(vlcSound==0){
// document.getElementById("no_sound").value=" 恢复音量 ";
document.getElementById("no_sound").value=" "+"恢复音量"+" ";
}else{
// document.getElementById("no_sound").value=" 静 音 ";
document.getElementById("no_sound").value=" "+"静"+" "+"音"+" ";
}
}
// 音量加减
function soundChange(nums){
if(nums<0 && vlcSound==0){
alert("音量最小，不能再减少音量....");
return;
}
vlcSound+=nums;
if(vlcSound<=0){
vlcSound=0;
document.getElementById("no_sound").value=" "+"恢复音量"+" ";
}else{
// 当音量>0的时候，都要把静音的标识打开
document.getElementById("no_sound").value=" "+"静"+" "+"音"+" ";
}
if(vlcSound>200){
alert("音量最大，不能再增大音量....");
vlcSound=200;
}
vlc.audio.volume =vlcSound;
document.getElementById("vlc_sound").value=vlcSound;
}
//全屏
function screenFull(){
vlc.video.toggleFullscreen()
}
</script>
</head>
<body onload="initPlayUrl()" >
<!--[if IE]>
<object type='application/x-vlc-plugin' id='vlc' events='True'
classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' width="720" height="540">
<param name='mrl' value='' />
<param name='volume' value='50' />
<param name='autoplay' value='false' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
</object>
<![endif]-->
<!--[if !IE]><!-->
<object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540">
<param name='mrl' value='' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
</object>
<!--<![endif]-->
<br><br>
<input type="button"
value=" 播 放 "
onclick="repeatPlay();" id="play_button">
<input type="button"
value=" 停 止 "
onclick="stopPlay();" id="stop_button">
<input type="button"
value=" 静 音 "
onclick="noSound();" id="no_sound">
<input type="button" value=" 减少音量 " onclick="soundChange(-10);">
<input type="button" value=" 增大音量 " onclick="soundChange(10);">
<input type="button" value=" 全 屏 " onclick="screenFull();">
<font color="red" size="2">音量：</font><input type="text" id="vlc_sound" style="width: 40px;color: blue">
<br>
<font color="red" size="2">总时长：</font><input type="text"
id="vedio_length" style="width: 65px;color: blue">
<input type="text" id="current_video_time" style="width: 65px;color: blue">
<font color="red" size="2">跳转：</font><input type="text" id="change_length" style="width: 100px;color: blue">
<span style="color: blue;font-weight: normal;font-size: 14px">秒</span>
<input type="button" value="确定" id="time_change" disabled="disabled" onclick="changeNewBeginTime();">
</body>
</html>
==========================结束======================
VLC在web系统中应用（x-vlc-plugin 即如何把VLC嵌入HTML中）第一篇的更多相关文章
- （系统架构）标准Web系统的架构分层
标准Web系统的架构分层 1.架构体系分层图 在上图中我们描述了Web系统架构中的组成部分.并且给出了每一层常用的技术组件/服务实现.需要注意以下几点: 系统架构是灵活的,根据需求的不同,不一定每一层 ...
- 千万pv大型web系统架构，学习从点滴开始
架构,刚开始的解释是我从知乎上看到的.什么是架构?有人讲, 说架构并不是一 个很 悬 乎的 东西 , 实际 上就是一个架子 , 放一些 业务 和算法,跟我们的生活中的晾衣架很像.更抽象一点,说架构其 ...
- Web系统大规模并发——电商秒杀与抢购
电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对于Web系统是一个巨大的考验.当一个Web系统,在一秒钟内收到数以万计甚至更多请求时,系统的优化和稳定至关重要.这次我们 ...
- 大型web系统数据缓存设计
1. 前言 在高访问量的web系统中,缓存几乎是离不开的:但是一个适当.高效的缓存方案设计却并不容易:所以接下来将讨论一下应用系统缓存的设计方面应该注意哪些东西,包括缓存的选型.常见缓存系统的特点和数 ...
- 亿级 Web 系统的容错性建设实践
一. 重试机制 最容易也最简单被人想到的容错方式,当然就是“失败重试”,总而言之,简单粗暴!简单是指它的实现通常很简单,粗暴则是指使用不当,很可能会带来系统“雪崩”的风险,因为重试意味着对后端服务的双 ...
- 亿级Web系统搭建——单机到分布式集群
当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题.为了解决这些性能压力带来问题,我们需要在Web系统架构层 ...
- 浅谈大型web系统架构
动态应用,是相对于网站静态内容而言,是指以c/c++.php.Java.perl..net等服务器端语言开发的网络应用软件,比如论坛.网络相册.交友.BLOG等常见应用.动态应用系统通常与数据库系统. ...
- 转：亿级Web系统的高容错性实践（好博文）
亿级Web系统的高容错性实践 亿级Web系统的高容错性实践 背景介绍 大概三年前,我在腾讯负责的活动运营系统,因为业务流量规模的数倍增长,系统出现了各种各样的异常,当时,作为开发的我,7*24小时地没 ...
- Web系统大规模并发——电商秒杀与抢购 【转】
电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对于Web系统是一个巨大的考验.当一个Web系统,在一秒钟内收到数以万计甚至更多请求时,系统的优化和稳定至关重要.这次我们 ...
随机推荐
- linux C 内存分配（~道的光芒四射~）
总结一下C语言中基本的内存分配,加深对内存管理的印象,一步一步走山路~~~~~~~~ 1. 程序和进程 问题:程序和进程各是什么? 程序 只是一段可以执行的代码文件,通俗讲在 linux 上就是一个 ...
- linux下sprintf_s函数的替代
error code: ]; sprintf_s(buf, , "predicted position:(%3d, %3d)", predict_pt.x, predict_pt. ...
- PS如何批量处理图片
喜爱摄影的朋友可能都有这样的体会,相机里面存了大量的图片,一般都是2048×1536或者更大像素的照片,每张都有1M以上,如果设置的清晰度高,则照片就更大,这样的图片是无法上传到博客中的(博客要求每张 ...
- 牛客练习赛14A(唯一分解定理)
https://www.nowcoder.com/acm/contest/82/A 首先这道题是求1~n的最大约数个数的,首先想到使用唯一分解定理,约数个数=(1+e1)*(1+e2)..(1+en) ...
- JVM 加载class文件的原理
PS:类的装载过程是ClassLoader,只有把类 加载 到 JVM后才能运行: PS:两种加载类的方式: 显示:new 隐式:class.forname() PS:动态的执行,用到谁,加载谁:
- 关联容器set的用法（关联容器，红黑树，）
set和multiset会根据特定的排序准则自动将元素排序,set中元素不允许重复,multiset可以重复.// 2017/7/23号 好像set容器里面只能装一个元素 #include<io ...
- GridView实现数据编辑和删除
<asp:GridView ID="gv_Emplogin" runat="server" AutoGenerateColumns="False ...
- 第一章 spring起步
点击 网址 http://start.spring.io/ 就可以获得spring-boot的项目结构. 如下: 将项目解压到自己的项目中,然后找到mian函数所在启动类.运行.出现: 表示已经运行了 ...
- 【转】linux下终端命令快捷键
原文网址:http://daaoao.blog.51cto.com/2329117/554177 linux下使用终端不可避免. 使用终端快捷键,当然会使你如虎添翼.记住他们吧 终端快捷键 tab=补 ...
- 从工程文化和运维理念理解Netflix
http://www.infoq.com/cn/news/2018/01/netflix-engineering-culture 在技术圈儿,Netflix 是一家非常有特色的互联网公司.他们信奉“自 ...