最近在做手机端上面播放视频的项目，但是在安卓上面，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. ISO/IEC 9899:2011 条款6.8.6——跳转语句

    6.8.6 跳转语句 语法 1.jump-statement: goto    identifier    ; continue    ; break    ; return    expressio ...

  2. 004-行为型-10-中介者模式（Mediator）

    一.概述 在Mediator模式中,类之间的交互行为被统一放在Mediator的对象中,对象通过Mediator对象同其他对象交互,Mediator对象起着控制器的作用. 用一个中介对象来封装一系列的 ...

  3. windows下新增项目本地通过git bash推送至远程github

    本地E盘workspace目录下新增了spring-cloud-alibaba-demo项目,还没有编译过,没有target等不需要推送至git的文件,所以就直接用git bash丢到github了. ...

  4. 【Spring】基于@Aspect的AOP配置

    Spring AOP面向切面编程,可以用来配置事务.做日志.权限验证.在用户请求时做一些处理等等.用@Aspect做一个切面,就可以直接实现. ·   本例演示一个基于@Aspect的小demo 1. ...

  5. QML随机颜色

    color=Qt.rgba(Math.random(),Math.random(),Math.random(),1)

  6. windows10 环境下的amqp安装步骤（图文）

    安装PHP扩展ampq 查看phpinfo()信息 下载ampq扩展 下载地址:http://pecl.php.net/package/amqp 选择一个dll版本下载,本文选择的是1.9.3 自己根 ...

  7. python 调用java脚本的加密(没试过，先记录在此)

    http://lemfix.com/topics/344 前言 自动化测试应用越来越多了,尤其是接口自动化测试. 在接口测试数据传递方面,很多公司都会选择对请求数据进行加密处理. 而目前为主,大部分公 ...

  8. 123457123456#0#----com.tym.ErTongFanPai20--前拼后广--儿童FanPai_tym

    com.tym.ErTongFanPai20--前拼后广--儿童FanPai_tym

  9. git的使用学习（四）git的远程仓库

    1.远程仓库介绍 到目前为止,我们已经掌握了如何在Git仓库里对一个文件进行时光穿梭,你再也不用担心文件备份或者丢失的问题了. 可是有用过集中式版本控制系统SVN的童鞋会站出来说,这些功能在SVN里早 ...

  10. CF1281B Azamon Web Services

    思路: 贪心,找到将s至多交换一次所能得到的字典序最小的字符串,再与c比较. 实现: #include <bits/stdc++.h> using namespace std; int m ...