29 Project summary: conversion plug videoplayer achieve Html achieve RTMP video player (with source code)

Foreword

　　Html because the project needs to play RTMP video on the Internet for a long time, but I never succeeded; videoplauer plug herself, according to the source, converted into code logic they need

Thinking

First test rtmp video on videplayer, to confirm the plug is no problem;
Quick View plug the relevant source code, and gradually remove your unwanted content, can help themselves with a browser debugging tools to quickly locate the content they need, so delete your unwanted parts;
videoplayer original page display

Source directory (for the convenience of presentation, there will be all the files in a directory under synonymous)

　　Contents are as follows;

complexDemo and simpleDemo. Html page is, the difference is: the former player tags are dynamically generated, can be embedded in business, more flexible; the latter is a static label, for display only;
jquery.js. Not contrived interpretation;
swfobject.js. Js files dynamically created private rooms need labels
playerProductInstall.swf. A Flash program that is used to update the user's system is higher than the Flash Player after the 6.65 version of Flash Player is installed.
SampleMediaPlayBack.swf. Its role was not immediately clear, but the necessary documents

Source

　　simpleDemo source

<!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
效果展示（第一打开浏览器，可能会询问是否允许插件，点击确认即可）

29 Project summary: conversion plug videoplayer achieve Html achieve RTMP video player (with source code)

29 Project summary: conversion plug videoplayer achieve Html achieve RTMP video player (with source code)

Guess you like