微信内置浏览器在使用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>

原文地址:https://www.cnblogs.com/ckAng/p/7448790.html