如果来自服务器的命令正在播放,则全屏播放HTML5视频

时间:2012-11-19 20:01:26

标签: android html google-chrome html5-video mobile-browser

我有一个数据库字段,它设置了不同的命令。例如,播放,暂停和停止。客户端网页循环播放命令。如果命令是播放它调用另一个函数调用playVideo()并应该全屏播放视频。如果从视频标记的onClick事件中调用它,则playVideo()函数本身可以正常工作,但是当从服务器响应代码调用它时,它不能按预期工作。看看代码。我需要使用Chrome桌面和Chrome移动浏览器。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Demo: HTML5 video controls with JavaScript</title>
        <style media="screen" type="text/css">
            div.container {
                background-color: #ddd;
                margin: 0 0 20px;
                padding: 1px 1px 0;
                width: 1280px;
                height: 720px;
            }
            p {
                font: 14px/1.3 Verdana, sans-serif;
            }
            p.back {
                bottom: 20px;
                left: 10px;
                position: absolute;
            }
            ul, li, p {
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
                overflow: hidden;
                padding: 10px 0;
                width: 100%;
            }
            li {
                float: left;
            }
            li.play_pause {
                padding-left: 10px;
                width: 40px;
            }
            li.time {
                text-align: center;
                width: 160px;
            }
            li.volume {
                padding-right: 10px;
                width: 100px;
            }
            .control {
                color: red;
                cursor: pointer;
            }
        </style>
        <!-- <script src="test_scripts/video.js" type="text/javascript"></script> -->
        <script>
            //var video = document.getElementById('video');
            //video.addEventListener('click', function() {
            //video.play();
            //}, false);
            //init();

            window.onload = function() {
                var pElement = document.getElementById("video");            
                    pElement.load();                
            };
            /*
             var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
             */
            function createObject() {
                var request_type;
                var browser = navigator.appName;
                if (browser == "Microsoft Internet Explorer") {
                    request_type = new ActiveXObject("Microsoft.XMLHTTP");
                } else {
                    request_type = new XMLHttpRequest();
                }
                return request_type;
            }

            var http = createObject();

            var nocache = 0;

            /*
             window.addEventListener(orientationEvent, function() {
             alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width + screen.height);

             }, false);*/

            window.setInterval(function() {
                waitForCommand();
            }, 3000);

            //waitForCommand();

            function init() {
                alert("init");
                var element = document.getElementById('video');
                element.load();
            };
            function waitForCommand() {
                nocache = Math.random();
                http.open('get', 'serverside/getcommand.php');
                http.onreadystatechange = insertReply;
                http.send(null);
            }

            var statusplay = 0;
            function insertReply() {
                if (http.readyState == 4) {
                    var response = http.responseText;
                    // else if login is ok show a message: "Site added+ site URL".

                    //alert(response);
                    if (response == "play" && statusplay == 0) {
                        alert("asddasd");
                        statusplay = 1;
                        var element = document.getElementById('video');
                        //element.click();
                        playVideo();
                    }
                }
            }

            function playVideo() {
                alert("123");
                //document.getElementById('myvideo').play();
                var element = document.getElementById("video");

                //element.webkitEnterFullScreen();
                if (element.mozRequestFullScreen) {
                    // This is how to go into fullscren mode in Firefox
                    // Note the "moz" prefix, which is short for Mozilla.
                    element.mozRequestFullScreen();
                    document.mozRequestFullScreen();
                    alert("1212");
                } else if (element.webkitRequestFullScreen) {
                    // This is how to go into fullscreen mode in Chrome and Safari
                    // Both of those browsers are based on the Webkit project, hence the same prefix.
                    //element.webkitRequestFullScreen();
                    //document.webkitRequestFullScreen();
                    alert("1313");
                } else {
                    alert("1414");
                    element.webkitEnterFullScreen();

                }
                //element.load();
                //element.addEventListener("loaded", doSomething, true);

                element.play();

                //$('#video').attr({'autoplay':'true'});
            }

            function doSomething() {
                //your redirect code here
                alert("12321");
                var element = document.getElementById('video');
                element.play();
                //playVideo();
            }
        </script>
    </head>
    <body>
        <!--video id="video" src="http://tinyvid.tv/file/12lx2x62kr9io.ogg"></video-->
        <div class="container" id="mydiv">
            <a href="#" onclick="playVideo()">Contact</a>
            <style type="text/css">
                .video_player {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            </style>
            <video class="video_player" id="video" name="video" autobuffer onclick="playVideo()"  poster="images/video-pc.jpg">
                <source src="videos/BigBuck.m4v"> </source>
                <source src="videos/BigBuck.webm" type="video/webm"> </source>
                <source src="videos/BigBuck.theora.ogv" type="video/ogg"> </source>
            </video>
            <ul class="controls">
                <li class="play_pause">
                    <p class="control" id="play">
                        Play
                    </p>
                </li>
                <li class="time">
                    <p>
                        <span id="timer">1</span>' of <span id="duration">0</span>'
                    </p>
                </li>
                <li class="volume">
                    <p>
                        Vol: <span class="control" id="v-dn" title="Volume down">-</span> / <span class="control" id="v-up" title="Volume up">+</span><span id="volume">10</span>
                    </p>
                </li>
            </ul>
        </div>
        <!--p><strong>NB:</strong> The video doesn't seem to work in Chrome for Mac/Linux; please use an alternative browser until I can resolve this problem.</p-->
        <p class="back">
            <a href="/2009/10/06/building-html5-video-controls-with-javascript/">Back to post: Building HTML5 video controls with JavaScript</a>
        </p>

    </body>
</html>

1 个答案:

答案 0 :(得分:0)

得到了我的答案,

自动调用requestFullscreen()是出于安全原因(至少在Chrome中)。因此,它只能通过以下方式调用:

点击(按钮,链接...) key(keydown,keypress ...) HTML元素的allowfullscreen属性* * W3规格: “...为了防止嵌入式内容全屏显示,只有通过HTML iframe元素的allowfullscreen属性明确允许的嵌入内容才能全屏显示。这可以防止不受信任的内容进入全屏......”

阅读更多:全屏W3规格