最近在做手机端上面播放视频的项目，但是在安卓上面，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. CDH 部署 Hadoop：5.开始安装

    Cloudera Enterprise 6.2.x   或者参考https://blog.csdn.net/shawnhu007/article/details/52579204 第零步:优化相关 e ...

  2. 深入学习c++--智能指针(二) weak_ptr（打破shared_ptr循环引用）

    1. 几种智能指针 1. auto_ptr: c++11中推荐不使用他(放弃) 2. shared_ptr: 拥有共享对象所有权语义的智能指针 3. unique_ptr: 拥有独有对象所有权语义的智 ...

  3. 零基础学Python_汇总贴

    https://time.geekbang.org/course/intro/98 零基础学Python-第一章 :Python介绍和安装-01.Python语言的特点 零基础学Python-第一章 ...

  4. k8s记录-下载k8s相关二进制包（一）

    1)软件清单操作系统:CentOS7Kubernetes版本:v1.14.2flannel:v0.10.0ectd3:v3.3.11Docker版本:v18.09.0-ceDocker-compose ...

  5. Linux的桌面虚拟化技术KVM（五）——virsh常用命令

    Linux的桌面虚拟化技术KVM(一)——新建KVM虚拟机 Linux的桌面虚拟化技术KVM(二)——远程桌面管理 Linux的桌面虚拟化技术KVM(三)——KVM虚拟机克隆和快照 Linux的桌面虚 ...

  6. Linux的桌面虚拟化技术KVM（一）——新建KVM虚拟机

    (1).虚拟化产品对比介绍 虚拟化技术有以下三种:仿真虚拟化,这是一种对系统硬件没有要求,但性能最低的虚拟化技术:半虚拟化,这是一种直接使用物理硬件,性能高,但需要修改内核的虚拟化技术:全虚拟化,这是 ...

  7. Elasticsearch技术解析与实战 PDF （内含目录）

    Elasticsearch技术解析与实战                                  介绍: Elasticsearch是一个强[0大0]的搜索引擎,提供了近实时的索引.搜索.分 ...

  8. 宣化上人：大佛顶首楞严经四种清净明诲浅释(10-11） -------------------------------------------------------------------------------- (转自学佛网：http://www.xuefo.net/nr/article23/230920.html)

    大佛顶首楞严经四种清净明诲浅释(10) 唐天竺·沙门般剌密帝译 宣化上人主讲 一九八三年四月十七日晚讲于万佛圣城 是故阿难.若不断偷修禅定者.譬如有人.水灌漏卮.欲求其满.纵经尘劫.终无平复. 是故阿 ...

  9. Pythonrandom模块（获取随机数）常用方法和使用例子

    Python random模块(获取随机数)常用方法和使用例子 这篇文章主要介绍了Python random模块(获取随机数)常用方法和使用例子,需要的朋友可以参考下 random.random ra ...

  10. js文档系统-jsdoc-docdash

    一.参考文档 模版:https://github.com/clenemt/docdash 例子:http://clenemt.github.io/docdash/index.html jsdoc:ht ...