項目總結29：改裝videoplayer插件，實現Html直接播放RTMP視頻(附源碼)

時間 2020-05-02

標籤項目總結改裝 videoplayer 插件實現 html 直接播放 rtmp 視頻源碼欄目 HTML 简体版

原文原文鏈接

項目總結29：改裝videoplayer插件，實現Html直接RTMP播放視頻(附源碼)

前言javascript

　　由於項目須要Html播放RTMP視頻，在網上找了很久，都沒成功；最後本身根據videoplauer插件源碼，改裝成本身須要的代碼邏輯html

思路java

先在videplayer上測試rtmp視頻，確認插件沒有問題；
快速瀏覽插件相關的源碼，並逐步刪除本身不須要的內容，能夠用瀏覽器調試工具幫助本身快速定位本身須要的內容，從而刪除本身不須要的部分；
videoplayer原始頁面展現

源碼目錄(爲了方便演示，這裏將所有文件放在了同義目錄下)jquery

　　目錄以下；express

complexDemo和simpleDemo。是html頁面，區別在於：前者的播放標籤是動態生成的，能夠進行嵌入業務，比較靈活；後者是靜態標籤，僅做展現；
jquery.js。不作做解釋；
swfobject.js。動態建立包房標籤須要的js文件
playerProductInstall.swf。一個Flash程序，被用來在高於6.65版本的Flash Player 被安裝後更新用戶系統的Flash Player。
SampleMediaPlayBack.swf。暫時還不清楚其做用，可是必要文件

源碼瀏覽器

　　simpleDemo源碼app

<!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">
<head>
    <title>rtmp play demo</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>

<body style="margin: 0 auto">

    <object type="application/x-shockwave-flash" id="SampleMediaPlayback" name="SampleMediaPlayback" align="middle" data="SampleMediaPlayback.swf" width="1520" height="860">
        <param name="quality" value="high"><param name="bgcolor" value="#000000">
        <param name="allowscriptaccess" value="sameDomain">
        <param name="allowfullscreen" value="true">
        <param name="flashvars" value="src=rtmp://localhost/live/stream&amp;streamType=vod&amp;autoPlay=true&amp;controlBarAutoHide=true&amp;controlBarPosition=bottom">
    </object>

</body>
</html>

　　complexDemo源碼　ide

<!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">
<head>
    <title>rtmp play demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!-- functionality -->
    <script src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="swfobject.js"></script>
    <script language="javascript"> $(function(){ var rtmpUrl = "rtmp://localhost/live/stream"; initialise(rtmpUrl); }) var queryParameters = new Array(); var flashVars = ""; var tag = ""; var url = ""; function initialise(rtmpUrl) { flashVars += "&src="; flashVars += rtmpUrl; flashVars += "&autoHideControlBar="; flashVars += unescape("true"); flashVars += "&streamType=vod"; flashVars += "&autoPlay="; flashVars += unescape("true"); flashVars += "&verbose=true"; var soFlashVars = { src: rtmpUrl, streamType: "vod", autoPlay: "true", controlBarAutoHide: "true", controlBarPosition: "bottom" }; tag = "&lt;object width='1080' height='720' id='SampleMediaPlayback' name='SampleMediaPlayback' type='application/x-shockwave-flash' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' &gt;&lt;param name='movie' value='SampleMediaPlayback.swf' /&gt; &lt;param name='quality' value='high' /&gt; &lt;param name='bgcolor' value='#000000' /&gt; &lt;param name='allowfullscreen' value='true' /&gt; &lt;param name='wmode' value='Opaque' /&gt; &lt;param name='flashvars' value= '" + flashVars + "'/&gt;&lt;embed src='SampleMediaPlayback.swf'wmode='Opaque' width='1080' height='640' id='SampleMediaPlayback' quality='high' bgcolor='#000000' name='SampleMediaPlayback' allowfullscreen='true' pluginspage='http://www.adobe.com/go/getflashplayer' flashvars='" + flashVars + "' type='application/x-shockwave-flash'&gt; &lt;/embed&gt;&lt;/object&gt;"; <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
            var swfVersionStr = "10.3.0"; <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "swfs/playerProductInstall.swf"; var params = {}; params.quality = "high"; params.bgcolor = "#000000"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; var attributes = {}; attributes.id = "SampleMediaPlayback"; attributes.name = "SampleMediaPlayback"; attributes.align = "middle"; swfobject.embedSWF("SampleMediaPlayback.swf", "flashContent", "1520", "860", swfVersionStr, xiSwfUrlStr, soFlashVars, params, attributes); <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. --> swfobject.createCSS("#flashContent", "display:block;text-align:left;"); } </script>

</head>
<body style="margin: 0 auto">
<!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show when JavaScript is disabled. -->

<div id="flashContent" style="position: relative">
    <p>To view this page ensure that Adobe Flash Player version 10.3.0 or greater is installed.</p>
    <script type="text/javascript">
        var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"+pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>"); </script>
</div>

</body>
</html>