最近在做手机端上面播放视频的项目，但是在安卓上面，video的播放是脱离页面，置于最顶层的，所以带来了很多问题，为了解决这个问题，查看了多方资料，写了下面简单的demo，方便以后使用。

下面就是运用canvas重绘video视频。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=640,user-scalable=no"/>

    <title>X5内核浏览器video自动全屏解决办法-canvas</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        html,body{

            width: 100%;

            height: 100%;

            overflow:hidden!important;

        }

        .content{

            position: absolute;

            width: 100%;

            height: 1136px;

            top: 50%;

            transform: translate3d(0, -50%, 0);

        }

        #play{

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate3d(-50%, -50%, 0);

            width: 100px;

            height: 100px;

            line-height: 100px;

            font-size: 28px;

            border: 1px solid #000;

            color: #000;

            text-align: center;

            border-radius: 50%;

        }

        #video{

            position:absolute;

            left:50%;

            transform: translate3d(-50%,0,0);

            width: 100%;

            height: 100%;

            object-fit: cover;

            object-position: center center;

            display:none;

        }

        #myCanvas{

            display: block;

        }

    </style>

</head>

<body>

    <div class="content">

        <div id="play">播放</div>

        <video id="video" x5-playsinline="true" playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" src="movie.mp4" preload></video>

        <canvas id="myCanvas">

            Your browser does not support the HTML5 canvas tag.

        </canvas>

    </div>

    <script type="text/javascript">

        var v = document.getElementById('video');

        var c = document.getElementById('myCanvas');

        var ctx = c.getContext('2d');

        document.getElementById("myCanvas").width = 640;

        document.getElementById("myCanvas").height = 1136;

        var cwidth = document.getElementById('myCanvas').offsetWidth;

        var cheight = document.getElementById('myCanvas').offsetHeight;

        // 初始化定时器

        var i=null;

        document.getElementById("play").addEventListener("click",function(){

            document.getElementById('video').play()

        });

        // 播放

        v.addEventListener("play", function() {

            document.getElementById("play").style.cssText = " display:none ";

            var i = window.setInterval(function() {

                ctx.drawImage(v, 0, 0, cwidth, cheight);

            }, 20);  // 每0.02秒画一张图片

        }, false);

        // 暂停

        v.addEventListener("pause", function() {

            window.clearInterval(i);  // 暂停绘画

        }, false);

        // 结束

        v.addEventListener("ended", function() {

            clearInterval(i);

        }, false);

    </script>

</body>

</html>

X5内核浏览器video自动全屏解决办法-canvas的更多相关文章

  1. video自动全屏播放

    video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...

  2. 防止微信浏览器video标签全屏的问题

    在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID" webkit-play ...

  3. UE4 VR 模式下全屏解决办法

    方法步骤: 1.打开关卡蓝图添加如下代码: 2.设置配置文件在工程目录里面找到 Config 文件夹在里面添加一个配置文件并命名为 DefaultGameUserSettings.ini 把如下内容贴 ...

  4. centOS 自动锁屏 解决办法

    System-->preferences --> Screensaver中 找到 Lock screen when screensaver is active 把前面的钩去掉

  5. 阻止 iPhone 视频自动全屏

    最近一年都在做直播,遭video 全屏的问题困扰了很久.下面将阻止 ios视频自动全屏的办法写出来.添加 playsinline 和 webkit-playsinline="true&quo ...

  6. 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  7. 微信内置浏览器video标签自动全屏的问题

    微信打开h5video视频的时候都会自动全屏播放,有时候影响用户体验 要禁止自动全屏就要加这几个属性 'x5-playsinline':'true', 'webkit-playsinline':'tr ...

  8. X5内核浏览器，video兼容

    使用vue-video-player在移动端微信内置浏览器打开,点击视频自动全屏问题. 参考官方 API 是 H5 同层浏览器的原因,可通过设置video属性来处理. <video-player ...

  9. audio与video控件/标签的隐藏，iso/Android下自动全屏播放，短暂黑屏问题

    (一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...

随机推荐

  1. 服务器端实时推送技术之SseEmitter的用法

    这是SpringMVC提供的一种技术,可以实现服务端向客户端实时推送数据.用法非常简单,只需要在Controller提供一个接口,创建并返回SseEmitter对象,发送数据可以在另一个接口调用其se ...

  2. openresty开发系列18--lua的字符串string操作

    openresty开发系列18--lua的字符串string操作 string的相关操作 1)string.upper(s)接收一个字符串 s,返回一个把所有小写字母变成大写字母的字符串.print( ...

  3. asp程序里，如何判断一个字符串中存在包含了另一个字符串？

    1.判断是否包含某某字符函数是:Instr()和InstrRev();2.具体使用如下:ab="abcdefgHTTP"你可以用Instr()或者InstrRev()来判断if I ...

  4. linux下配置face_recognition

    1.如linux下已有python2.7,但需要更新一下python 2.7至python2.x sudo add-apt-repository ppa:fkrull/deadsnakes-pytho ...

  5. ABAP DEMO so批量导入

    *&---------------------------------------------------------------------* *& Report YDEMO_015 ...

  6. linq list select用法注意事项

    下面是我自己做的一个例子 List<CR_CustomerOrder> OrdList = new List<CR_CustomerOrder>(); var b = OrdL ...

  7. jQuery调用WebService返回JSON数据

    相信大家都比较了解JSON格式的数据对于ajax的方便,不了解的可以从网上找一下这方面的资料来看一下,这里就不多说了,不清楚的可以在网上查一下,这里只说一下因为参数设置不当引起的取不到返回值的问题. ...

  8. JSON Hijacking漏洞

    https://github.com/SkyLined/LocalNetworkScanner JS.利用浏览器漏洞当对方打开网址时,扫描对方内网信息 https://www.freebuf.com/ ...

  9. Swoole练习 UDP

    UDP 服务代码 <?php //创建Server对象,监听 127.0.0.1:9502端口,类型为SWOOLE_SOCK_UDP $serv = new swoole_server(&quo ...

  10. WXS---基础类库