使用VLC Activex插件作網頁版視頻播放器

時間  2019-11-06
標籤 使用 vlc activex 插件 網頁 視頻 播放 欄目 HTML 简体版
原文   原文鏈接

網上找的一個小例子，包括時長播放時間等等都有。javascript

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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程