網上找的一個小例子,包括時長播放時間等等都有。
mrl可以設置本地文件,這樣發布網站后只能播放本地有的文件,
如果視頻文件全在服務器上,其他電腦想看的話,則可以IIS上發布個視頻文件服務器,類似http://192.168.1.1:8000/video/1.flv 這樣可以訪問到視頻文件,然后這個http路徑可以設置為mrl
但這樣的話經測試支持的格式不多,flv是可以的
測試可以使用 使用vlc播放器播放rtsp視頻 這里的打開網絡串流看能不能正常播放,如果播放不了,即使視頻文件可以訪問到這個插件也播放不了的
vlc開發相關參考 web網頁中使用vlc插件播放相機rtsp流視頻 這里不再講解
<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='1.mp4' />
<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='1.mp4' />
<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>
