VLC播放RTSP視頻流(360瀏覽器可用)

原創 swrd2014 2020-02-21 11:13 
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" >  -->
<!DOCTYPE >
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<link rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" href="css/easyui.css" />
<link rel="stylesheet" href="css/icon.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easyui.min.js"></script>
<script>   
var itemId = 0;  
var url = "";
var totalTime = "";
var playTime;
var ss=0;
var sMin=0;
var sH=0;
var millisec=0;
var tottime = 0;
var iTime;
function registerVLCEvent(event, handler) {
    var vlc = getVLC("vlc");
    if (vlc) {
        if (vlc.attachEvent) {
            // Microsoft
            vlc.attachEvent (event, handler);
        } else if (vlc.addEventListener) {
            // Mozilla: DOM level 2
            vlc.addEventListener (event, handler, false);
        }
    }
}
function unregisterVLCEvent(event, handler) {
    var vlc = getVLC("vlc");
    if (vlc) {
        if (vlc.detachEvent) {
            // Microsoft
            vlc.detachEvent (event, handler);
        } else if (vlc.removeEventListener) {
            // Mozilla: DOM level 2
            vlc.removeEventListener (event, handler, false);
        }
    }
}
function getVLC(name)   
{   
        if (window.document[name])      
        {   
                return window.document[name];   
        }   
        if (navigator.appName.indexOf("Microsoft Internet")==-1)   
        {   
                if (document.embeds && document.embeds[name])   
                        return document.embeds[name];      
        }   
        else   
        {   
                return document.getElementById(name);   
        }   
}   
function showTime(){
	 var vlc = getVLC("vlc"); 

	 setTimeout(setTime,1000);
	 function setTime(){
	 	console.log(vlc.input.length);	
	 millisec = vlc.input.length;
	 var h = Math.floor(millisec/1000/60/60);
	 var min = Math.floor(millisec/1000/60);
	 var s = Math.floor(millisec/1000)-min*60;
	 if(h<=0)
	 {
	 	h = "00";
	 }else if(h>0&&h<10){
	 	h = "0"+h;
	 }
	  if(min<=0)
	 {
	 	min = "00";
	 }else if(min>0&&min<10){
	 	min = "0"+min;
	 }
	  if(s<=0)
	 {
	 	s = "00";
	 }else if(s>0&&s<10){
	 	s = "0"+s;
	 }
	 totalTime = h+":"+min+":"+s;
	 console.log(totalTime);
	 $("#totaltime").empty();
	 $("#totaltime").append("總時長: "+totalTime);	 	
		}
	 iTime=setInterval(playTime,1000);
	 function playTime(){
	 
	 	if(ss<60){
	 		ss++;
	 		if(ss<10){
	 			ss="0"+ss;
	 		}	 		
	 	}else{
	 		sMin++;
	 		ss=0;
	 		if(sMin<10){
	 			sMin= "0"+sMin;
	 		}
	 		if(sMin>=60){
	 			sMin = 0;
	 			sH++;
	 			if(sH<10){
	 				sH = "0"+sH;
	 			}
	 			if(sH>=24){
	 				sH=0;
	 			}
	 		}
	 	}
	 playTime = sH+":"+sMin+":"+ss;
	 tottime = parseInt(sH)*60*60+ parseInt(sMin)*60+parseInt(ss);
	  if(tottime>=Math.floor(millisec/1000))
	 {
//	 	alert("===");
	 	clearInterval(iTime);
	 }
	 $("#palyTime").empty();
	 $("#palyTime").append(playTime);		
	 console.log(tottime );	
	 }
	
	}
function doGo(mrl)   
{   	
//		alert(mrl);
		ss=0;
        sMin=0;
        sH=0;
		$("#palyTime").empty();
	 	$("#palyTime").append("--:--:--");
        var vlc = getVLC("vlc");   
        itemId=vlc.playlist.add(mrl); 
        vlc.playlist.playItem(itemId);   
        document.getElementById("btn_stop").disabled = false;   
}   
  
function updateVolume(deltaVol)   
{   
        var vlc = getVLC("vlc");   
        vlc.audio.volume += deltaVol;   
}   
function doPlay()   
{   
//		alert(itemId);
		var vlc = getVLC("vlc"); 
		vlc.playlist.play();
//		unregisterVLCEvent("MediaPlayerPlaying",handle_MediaPlayerPlaying);
//		showTime();
        document.getElementById("btn_stop").disabled = false;   
        document.getElementById("btn_play").disabled = true;   
}   
function handle_MediaPlayerPaused(){
//  alert("Paused");
    clearInterval(iTime);
} 
function handle_MediaPlayerPlaying(){

//  alert("Playing");
    showTime();
}
function doStop()   
{   
        clearInterval(iTime);
        ss=0;
        sMin=0;
        sH=0;
         $("#palyTime").empty();
	 $("#palyTime").append("--:--:--");	
        getVLC("vlc").playlist.stop();
        document.getElementById("btn_stop").disabled = true;   
        document.getElementById("btn_play").disabled = false;   
}   
function getTime(){
	var st=document.getElementById("startTime");
	var et=document.getElementById("endTime");
	var stValue = $("#starttime").datetimebox("getValue");
	var etValue = $("#endtime").datetimebox("getValue");

//	alert(stValue);
//	alert(etValue);
	var stYear = stValue.substr(6,4);
	var stMonth = stValue.substr(0,2);
	var stDay = stValue.substr(3,2);
	var stH = stValue.substr(11,2);
	var stMin = stValue.substr(14,2);
	var stS =stValue.substr(17,2);
	var stTime = stYear+"_"+stMonth+"_"+stDay+"_"+stH+"_"+stMin+"_"+stS;
//	alert(stTime);
	var etYear = etValue.substr(6,4);
	var etMonth = etValue.substr(0,2);
	var etDay = etValue.substr(3,2);
	var etH = etValue.substr(11,2);
	var etMin = etValue.substr(14,2);
	var etS =etValue.substr(17,2);
	var etTime = etYear+"_"+etMonth+"_"+etDay+"_"+etH+"_"+etMin+"_"+etS;
//	alert(etTime);	
	url = "rtsp://666666:[email protected]:554/cam/playback?channel=1&subtype=0"+"&starttime="+stTime+"&endtime="+etTime;
	alert(url);
	doGo(url);
}
window.οnlοad=function(){
	// Register a bunch of callbacks.
	registerVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused);
	registerVLCEvent("MediaPlayerPlaying",handle_MediaPlayerPlaying);
}
</script>   
</head>   
<body>   
<div style="margin: 50px">   
        <!--<a title="rtsp://666666:[email protected]:554/cam/playback?channel=1&subtype=0" href="#" οnclick="tip();return false;">貴州視頻rtsp流</a>--> 
        <h2 align="center">貴州監控視頻</h2>
        <span style="margin: 20px;" />   
        <a title="rtsp://218.204.223.237:554/live/1/66251FC11353191F/e7ooqwcfbqjoo80j.sdp" href="#" οnclick="doGo(this.title);return false;">測試視頻rtsp流</a> 
       <span style="margin: 20px;" /> 
         <a title="http://127.0.0.1:8020/VLC01/1.flv" href="#" οnclick="doGo(this.title);return false;">本地flv視頻流</a>
        <span style="margin: 20px;" /> 
          <a title="rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" href="#" οnclick="doGo(this.title);return false;">時長rtsp視頻流</a>
        <span style="margin: 20px;" /> 
          <a title="http://192.168.35.121:13160/hdfsdownload/video/movie/20160623/fffca7b2k100026885.ts" href="#" οnclick="doGo(this.title);return false;">http協議ts視頻流</a>
        <span style="margin: 20px;" /> 
</div>   
<div align="center">   
    <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" id="vlc"  
    codebase="http://download.videolan.org/pub/videolan/vlc/0.8.6c/win32/axvlc.cab"  
       width="600" height="480" id="vlc" events="True">  
 <param name="MRL" value="" />  
 <param name="Src" value="" />   
   <param name="ShowDisplay" value="True" />  
 <param name="AutoLoop" value="False" />  
 <param name="AutoPlay" value="False" />  
 <param name="Time" value="True"/>  
 <EMBED pluginspage="http://www.videolan.org"  
       type="application/x-vlc-plugin"  
       version="VideoLAN.VLCPlugin.2"  
       width="600"  
       height="480"      
       text="Waiting for video"  
       name="vlc"  
       ></EMBED>  
 </OBJECT>   
</div> 

<div align="center">  
<span id="palyTime">--:--:--</span>      
<input style="cursor: pointer;" type=button id="btn_play" value=" 重播 " onClick='doPlay();' disabled="true">   
<input style="cursor: pointer;"type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true">   
<input style="cursor: pointer;"type=button value="靜音切換" οnclick='getVLC("vlc").audio.toggleMute();'>   
<input style="cursor: pointer;"type=button value="減小音量" οnclick='updateVolume(-10)'>   
<input style="cursor: pointer;"type=button value="增加音量" οnclick='updateVolume(+10)'> 
      <span id="totaltime">總時長： --:--:--</span>
</div> 
<div style="margin-left: 1020px; margin-top: -300px;">
	<span">開始時間：</span><input class="easyui-datetimebox" required style="width:150px;height: 25px;" id="starttime">
	<br/><br/><br/>
	<span>結束時間：</span><input class="easyui-datetimebox" required style="width:150px;height: 25px;" id="endtime">
</div>
	<br/><br/><br/><input style="margin-left: 1080px; width: 150px; cursor: pointer;" type="button"οnclick="getTime()" value="查詢"/>
  
</body>   
</html>  
























swrd2014



發佈了28 篇原創文章 · 獲贊 17 · 訪問量 10萬+





私信

關注

















發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








（單）標籤到底該不該閉合






<br>
<hr>
<input>
<meta>
<link>
Google規定<br> 不需要“/”
HTML 規定“/”可有可無
優點：
代碼整潔，現在新手比較喜歡不寫“/”
用自己的使用習慣就行，現今沒有統一標準






 mwb310

2020-07-07 23:58:40









JQuery 實現圖片滑動實例






<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
wi






 WihauShe

2020-07-07 20:06:27









JS_目錄






DOM(Document Object Model)文檔對象模型，以及文檔的加載
事件、事件句柄
DOM查詢----獲取模型樹中的節點document中的方法，以及節點中的屬性
獲取/修改元素節點的屬性
獲取/修改元素節點的內






 丨QAQ丨凸

2020-07-08 11:21:00









js給value動態賦值






//動態改變少數民族的值
function checkSelect(){
var ontion = document.getElementById("nations").value;
//alert("少數民族的值爲："+ont






 Old丶Seven

2020-07-08 11:20:47









在線查看OFFICE文件






https://view.officeapps.live.com/op/view.aspx?src=你地址






 [email protected]

2020-07-08 10:59:52









用戶用蘋果設備的QQ裏打開鏈接時候提示用微信打開（只限制QQ裏，如果是QQ瀏覽器則可以正常打開）






// 判斷瀏覽器內核、手機系統等，使用 browser.version.ios
var browser = {
version: function () {
var u = navigator.userAg






 徐扬_前端小白的成长之路

2020-07-08 06:33:45









bootstrap側邊導航欄的實現






https://blog.csdn.net/kebi007/article/details/76038251
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF






 吃鱼的羊

2020-07-08 05:50:47









js實現一個打點計時器






問題描述：
1、從 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一個數字，每次數字增幅 1
2、返回的對象中需要包含一個 cancel 方法，用於停止定時操作






 Clam_WH

2020-07-08 05:47:57









js的Prototype屬性詳解






js的prototype 屬性，w3c說：prototype 屬性使您有能力向對象添加屬性和方法。說的總是很模糊，網上找的大神的解釋很詳細。。。
avascript中的每個對象都有prototype屬性，Javascript中對象的pro






 weierbufan

2020-07-08 03:39:14









Python+selenium 自動化高級應用篇：藉助pyautogui實現web前端帶軌跡拖拽功能，解決ActionChains拖拽失效問題






有一些 web 前端的交互，必須有鼠標軌跡才能成功的實現拖拽功能。
而 selenium 自帶的 ActionChains 方法，是一瞬間從 A 點到 B 點的。
解決思路：
利用元素返回的相對瀏覽器的位置的方法， locati






 挣扎的蓝藻

2020-07-08 02:57:51









JavaScript 技術篇 - js通過xpath路徑定位元素方法






我先寫好一段 xpath 路徑，然後通過該路徑可以查到對應的元素節點。
通過 document.evaluate('...', document).iterateNext() 方法可以用 xpath 路徑定位到元素節點。
>






 挣扎的蓝藻

2020-07-08 02:57:51









vue中使用axios處理post方法導出excel表格






vue中使用axios處理post方法導出excel表格。
技術點：vue、axios、poi
1、後臺輸出數據流。（ps：因爲表格模板格式會比較好看，所以建議使用模板）
/**
* 導出測試
* @retu






 football98

2020-07-08 01:19:24









JS控制彈窗大小及位置






function Screen() { var num, num1; //num=screen.availHeight; //num1=screen.availWidth; num = screen.height; num1 = scre






 赜

2020-07-08 00:34:12









JS點擊按鈕自動增加一行






<input type="button" value="增加" id="addTable"/>
<input type="button" value="刪除" id="deleteTable"/>
<table id="table1"><






 bulongwind

2020-07-07 22:27:01









使用JS實現網頁計算器案例






法一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{widt






 WihauShe

2020-07-07 20:06:27