VLC在web系統中應用（x-vlc-plugin 即如何把VLC嵌入HTML中）
VLC毫無疑問是優秀的一款播放軟體，子B/S機構的web專案中，如果能把它嵌入頁面，做頁面預覽或者其他，是非常棒的。
第一步：下載VLC安裝程式；（推薦1.0.3或者是1.0.5版本，比較穩定）
第二步：安裝；（我實在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/
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>
==========================結束======================
預覽效果
大爺的，卡圖的時候很奇怪，播放的視訊卡不下來！