zoukankan      html  css  js  c++  java
  • 微信内置浏览器在使用video标签时(安卓)默认全屏的原因及解决办法

    根据X5论坛得到的答案是:设计如此。

      腾讯真是越来越嚣张了,一家独大后用户体验都不注重了(不给程序员留活路)。

      听说有个申请加入vdeo白名单的,域名验证后就可以解决默认全屏(反正我是没见过申请入口,不给钱,想进来没门。)

    最终的解决办法:

      将video转化为canvas,逐帧播放,不过canvas貌似最高可以达到60帧/s,不过页够用了(扯淡:玩LOL起码要150FPS左右);

      copy大神的JQ代码(原理都是相通的)如下:

      

    <!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></title>
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" >
            function play() {
                var video = $("#myVideo").get(0).play();
            }
            function stop() {
                var video = $("#myVideo").get(0).pause();
            }
            $(document).ready(function () {
                var video = $("#myVideo");
                var _video = video.get(0);
                $("#myVideo").bind("play", function () {
                    drawCanvas();
                });
                function drawBlock(context, x, y, width, height, color) {
                    var imageData = context.createImageData(width, height);
                    var pixelArray = imageData.data,
                        pixel = null;
                    for (var m = 0, length = pixelArray.length; m < length; m += 4) {
                        pixelArray[m] = pixelArray[m + 1] = pixelArray[m + 2] = pixelArray[m + 3] = color;
                    }
                    context.putImageData(imageData, x, y);
                }
                function drawCanvas() {
                    if (_video.paused || _video.ended) {
                        return;
                    }
                    var canvas = $("#canvas");
                    var _canvas = canvas.get(0);
                    var context = _canvas.getContext("2d");
                    context.drawImage(_video, 0, 0, 640, 360);
                    setTimeout(drawCanvas, 30);
                }
            });
        </script>
    </head>
    <body>
    <center>
    <hr />

    <video  width="640" height="360" id="myVideo" controls>
        <source src="movie.ogg" ></source>
    </video>
    <canvas width="640" height="360" id="canvas">

    </canvas>
    <button onclick="play()" >play</button><button onclick="stop()">stop</button>
    <hr />
    <video width="640" height="360" controls>
        <source src="movie.ogg" ></source>
    </video>
    </center>
    </body>
    </html>

  • 相关阅读:
    导弹拦截版
    [USACO1.5]数字三角形 Number Triangles
    FBI树
    修复公路
    台阶问题
    阶乘问题
    连续自然数和
    又是毕业季I
    生活大爆炸版石头剪刀布
    曹冲养猪
  • 原文地址:https://www.cnblogs.com/ckAng/p/7448790.html
Copyright © 2011-2022 走看看