在Chrome上通過vlc插件播放rtsp和rtmp視頻


最近之前的老項目的vlc視頻在Chrome上播放不出來了,查了很多資料,才發現Chrome上播放很有限制。於是為了讓大家少走彎路,把資料整理了下,記錄如下:

1.Chrome只有41版本以前才支持VLC插件,這里找了40的版本。在安裝之前,一定要把本機已有的Chrome卸載掉。裝完后要確認一下版本是40:

 http://www.cnbeta.com/articles/soft/364651.htm

2.因為公司的vlc寫法是object所以必須要下載小於2.2.0的vlc播放器客戶端,vlc各個版本的下載地址如下:

   http://download.videolan.org/pub/videolan/vlc/

注:參考了wiki的資料,很有用,大家可以看下:https://wiki.videolan.org/Documentation:WebPlugin/

 

下面是demo,可以播放rtsp和rtmp2種視頻,大家可以直接拷到自己的編輯器中運行即可:
(1)index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="player" style="position:relative;text-align:center;"></div>
    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

(2)index.js

$(function(){
    var url = "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov";//rtsp視頻
    url = "rtmp://live.hkstv.hk.lxdns.com/live/hks";//rtmp視頻
    if(url){
        theHtml = '<object type="application/x-vlc-plugin" pluginspage="http://www.videolan.org/" id="vlc" events="false" width="480" height="300">'+ 
                        '<param name="mrl" value="' + url + '" />'+
                        '<param name="volume" value="50" />'+
                        '<param name="autoplay" value="true" />'+
                        '<param name="loop" value="false" />'+
                        '<param name="play" id="isPlay" value="true" />'+
                        '<param name="fullscreen" value="false" />'+
                        '<param name="controls" value="false" />'+
                '</object>';
    }else{
        theHtml = "暫無視頻連接";
    }
    document.getElementById("player").innerHTML = theHtml; 
    $("#vlc").css("width","480");
    $("#vlc").css("height","300");
})

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM