jquery-custom-chrome.html

jquery-custom-chrome.html — HTML, 7 kB (7.988 bytes)

Dateiinhalt

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Flash/Strobe Media Playback</title>
        <style type="text/css">
            body {
                font: 12px Arial, sans-serif;
                background-color: #000000;
                color: #FFFFFF;
                height: 100%;
                width: 100%;
                margin: 0;
                overflow: hidden;
            }
        </style>
        <link type="text/css" href="jquery.strobemediaplayback.css" rel="stylesheet" />
        <script type="text/javascript" src="lib/jquery/jquery-1.4.2.js">
        </script>
        <script type="text/javascript" src="lib/swfobject.js">
        </script>
        <script type="text/javascript" src="jquery.strobemediaplayback.js">
        </script>
        <script type="text/javascript">
            $.fn.strobemediaplayback.defaults.swf = "StrobeMediaPlayback.swf";
            //$.fn.strobemediaplayback.defaults.swf = "http://127.0.0.1:8000/smp/StrobeMediaPlayback/bin/StrobeMediaPlayback.swf";
            
            $.fn.adaptiveexperienceconfigurator.rules.push(// flash10_0 
            function(context, options){
                if (context.flashPlayerVersion.major == 10 && context.flashPlayerVersion.minor == 0) {
                    context.setOption(options, "src", "http://osmf.org/dev/videos/cathy2_HD.mp4");
                }
            }, // android Tablet or Phone
             function(context, options){
                if (context.isAndroid && (context.isTablet || context.isPhone)) {
                    context.setOption(options, "src", "http://osmf.org/dev/videos/cathy2_SD.mp4");
                }
            }, // is Firefox
            function(context, options){
                context.isFirefox = context.userAgent.match(/Firefox/i) != null;
                if (context.isFirefox && options.html5) {
                    context.setOption(options, "src", "http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg");
                }
                else {
                    context.setOption(options, "src", "http://osmf.org/dev/videos/cathy2_HD.mp4");
                }
            }, // is iOS
            function(context, options){
                if (context.isiPad || context.isiPhone) {
                    context.setOption(options, "src", "http://osmf.org/dev/videos/cathy1_SD.mp4");
                }
            });
            
            var options = {
                src: "http://osmf.org/dev/videos/cathy1_HD.mp4",
                width: 480,
                height: 362,
                javascriptControls: true,				
                autoPlay: false,
                controlBarMode: "floating",
                poster: "images/poster.png",
                playButtonOverlay: true,
                loop: true
            };
			
            options.id = "strobeMediaPlaybackId";
            
            $(function(){
            
                // Get the page query string and retrieve page params
                var pageOptions = {}, queryString = window.location.search;
                if (queryString) {
                    queryString = queryString.substring(1);
                    pageOptions = $.fn.strobemediaplayback.parseQueryString(queryString);
                }
                
                options = $.extend({}, options, pageOptions);
                options = $.fn.adaptiveexperienceconfigurator.adapt(options);
                if (!options.javascriptControls) {
                    $(".strobeMediaPlaybackControlBar,.smp-error,.playoverlay").hide();
                }
                // Now we are ready to generate the video tags
                var smp = $("#strobemediaplayback-video").strobemediaplayback(options);
            });
            
            function onJavaScriptBridgeCreated(id){
                $("#strobemediaplayback").strobemediaplaybackchrome(options);
            }
        </script>
    </head>
    <body>
        <div style="padding:100px;background-color:#777777">
            <div iv id="html5MediaPlayback" style="width:480px; height:362px;background-color:#777777;">
                <div id="strobemediaplayback" style="width:480px; height:362px;background-color:#777777;">
                    <div id="strobemediaplayback-video" style="width:480px; height:362px;background-color:#777777;">
						Alternative Content
                    </div>
                    <a class="smp playoverlay"></a>
                    <span class="smp-error"></span>
                    <div class="strobeMediaPlaybackControlBar">
                        <a class="smp play"></a>
                        <div class="video-progress2">
                            <a class="slider"></a>
                            <div class="video-track">
                                <div class="played">
                                </div>
                                <div class="buffered">
                                </div>
                            </div>
                        </div>
                        <!--a class="smp fullscreen" title="not implemented yet"></a-->
                        <a class="smp volume high"></a>
                        <div class="time">
                            <span class="currentTime">0:00</span> / <span class="duration">0:00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="seekDebug" style="color:#FFFFFF;">
            ...
        </div>
        <div id="debug" style="color:#FFFFFF;">
            ...
        </div>
    </body>
    <div>
        <script type="text/javascript">
            $(function(){
                $(".mysrc").bind("click", updateSrc);
            });
            
            function updateSrc(event){
                var video;
                video = $("#" + options.id)[0];
                if (org.strobemediaplayback.proxied[options.id]) {
                    video = (org.strobemediaplayback.proxied[options.id]).videoElement;
                }
                
                video.src = this.href;
                video.load();
                video.play();
                return false;
            }
        </script>
        <h3>MP4 files, for Chrome & Safari</h3>
        <a class="mysrc" href="http://osmf.org/dev/videos/cathy1_SD.mp4">http://osmf.org/dev/videos/cathy1_SD.mp4</a>
        <br/>
        <a class="mysrc" href="http://osmf.org/dev/videos/cathy1_HD.mp4">http://osmf.org/dev/videos/cathy1_HD.mp4</a>
        <br/>
        <a class="mysrc" href="http://osmf.org/dev/videos/cathy2_SD.mp4">http://osmf.org/dev/videos/cathy2_SD.mp4</a>
        <br/>
        <a class="mysrc" href="http://osmf.org/dev/videos/cathy2_HD.mp4">http://osmf.org/dev/videos/cathy2_HD.mp4</a>
        <br/>
        <a class="mysrc" href="http://media.w3.org/2010/05/sintel/trailer.mp4">http://media.w3.org/2010/05/sintel/trailer.mp4</a>
        <br/>
        <a class="mysrc" href="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4">http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4</a>
        <h3>OGG files, for Firefox HTML5 only</h3>
        <a class="mysrc" href="http://media.w3.org/2010/05/sintel/trailer.ogv">http://media.w3.org/2010/05/sintel/trailer.ogv</a>
        <br/>
        <a class="mysrc" href="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg">http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg</a>
        <br/>
        <!--a class="mysrc" href="http://osmf.org/dev/videos/cathy1.ogv">http://osmf.org/dev/videos/cathy1.ogv</a>
        <br/>
        <a class="mysrc" href="http://osmf.org/dev/videos/cathy2.ogv">http://osmf.org/dev/videos/cathy2.ogv</a-->
    </div>
</html>