29プロジェクト概要:変換プラグのVideoPlayer HTMLは(ソースコード)RTMPビデオプレーヤを達成達成

29プロジェクト概要:変換プラグのVideoPlayer HTMLは(ソースコード)RTMPビデオプレーヤを達成達成

序文

  Htmlのプロジェクトは、長い時間のためのインターネット上のRTMPのビデオを再生する必要がありますが、私は成功したことがないので、videoplauer身を差し込み、ソースによると、彼らが必要とするコードのロジックに変換

考え

  1. プラグを確認するための最初のテストvideplayer上のRTMPビデオには、問題ありません。
  2. クイックビューの関連するソースコードを差し込み、徐々にあなたの不要なコンテンツを削除し、すぐに彼らが必要なコンテンツを見つけるために、ブラウザのデバッグツールで自分自身を助けるので、あなたの不要な部分を削除することができます。
  3. VideoPlayer元のページの表示

 

ソースディレクトリ(プレゼンテーションの便宜のために、同義語下のディレクトリ内のすべてのファイルが存在します)

  次のように内容があります。

  1. complexDemoとsimpleDemo。HTMLページは差がある;後者は静的なラベルである、唯一の表示のために、より柔軟な、元選手タグが動的に生成されたビジネスに埋め込むことができます。
  2. jquery.js。不自然ではない解釈。
  3. swfobject.js。JSファイルを動的にラベルを必要とプライベートルームを作成しました
  4. playerProductInstall.swf。Flash Playerの6.65バージョンがインストールされた後にユーザーのシステムを更新するために使用されるフラッシュプログラムは、Flash Playerよりも高くなっています。
  5. SampleMediaPlayBack.swf。その役割はすぐに明らかではなかったが、必要な書類

ソース

  simpleDemoソース

  

<!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源码 

<!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>

   源码链接:

    链接:https://pan.baidu.com/s/1AwVD7fUWU9ir1v6CnfMB1g
    提取码:cdno
效果展示(第一打开浏览器,可能会询问是否允许插件,点击确认即可)

 

おすすめ

転載: www.cnblogs.com/wobuchifanqie/p/10983840.html