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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=640,user-scalable=no"/>
  6.     <title>X5内核浏览器video自动全屏解决办法-canvas</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         html,body{
  13.             width: 100%;
  14.             height: 100%;
  15.             overflow:hidden!important;
  16.         }
  17.  
  18.         .content{
  19.             position: absolute;
  20.             width: 100%;
  21.             height: 1136px;
  22.             top: 50%;
  23.             transform: translate3d(0, -50%, 0);
  24.         }
  25.  
  26.         #play{
  27.             position: absolute;
  28.             top: 50%;
  29.             left: 50%;
  30.             transform: translate3d(-50%, -50%, 0);
  31.             width: 100px;
  32.             height: 100px;
  33.             line-height: 100px;
  34.             font-size: 28px;
  35.             border: 1px solid #000;
  36.             color: #000;
  37.             text-align: center;
  38.             border-radius: 50%;
  39.         }
  40.         #video{
  41.             position:absolute;
  42.             left:50%;
  43.             transform: translate3d(-50%,0,0);
  44.             width: 100%;
  45.             height: 100%;
  46.             object-fit: cover;
  47.             object-position: center center;
  48.             display:none;
  49.         }
  50.         #myCanvas{
  51.             display: block;
  52.         }
  53.  
  54.     </style>
  55. </head>
  56. <body>
  57.     <div class="content">
  58.         <div id="play">播放</div>
  59.         <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>
  60.         <canvas id="myCanvas">
  61.             Your browser does not support the HTML5 canvas tag.
  62.         </canvas>
  63.     </div>
  64.     <script type="text/javascript">
  65.  
  66.         var v = document.getElementById('video');
  67.         var c = document.getElementById('myCanvas');
  68.         var ctx = c.getContext('2d');
  69.         document.getElementById("myCanvas").width = 640;
  70.         document.getElementById("myCanvas").height = 1136;
  71.         var cwidth = document.getElementById('myCanvas').offsetWidth;
  72.         var cheight = document.getElementById('myCanvas').offsetHeight;
  73.         // 初始化定时器
  74.         var i=null;
  75.         document.getElementById("play").addEventListener("click",function(){
  76.             document.getElementById('video').play()
  77.         });
  78.         // 播放
  79.         v.addEventListener("play", function() {
  80.             document.getElementById("play").style.cssText = " display:none ";
  81.             var i = window.setInterval(function() {
  82.                 ctx.drawImage(v, 0, 0, cwidth, cheight);
  83.             }, 20);  // 每0.02秒画一张图片
  84.         }, false);
  85.  
  86.         // 暂停
  87.         v.addEventListener("pause", function() {
  88.             window.clearInterval(i);  // 暂停绘画
  89.         }, false);
  90.  
  91.         // 结束
  92.         v.addEventListener("ended", function() {
  93.             clearInterval(i);
  94.         }, false);
  95.     </script>
  96. </body>
  97. </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. 三、HTTP响应

    HTTP消息是服务器和客户端之间交换数据的方式 有两种类型的消息: 请求--由客户端发送用来触发一个服务器上的动作 相应--来自服务器的应答 一.HTTP响应的构成 1.状态行 HTTP响应的起始行被 ...

  2. LeetCode_205. Isomorphic Strings

    205. Isomorphic Strings Easy Given two strings s and t, determine if they are isomorphic. Two string ...

  3. jenkins--master/slave模式---master是容器版---slave是非容器版

    实验架构: 192.168.0.96 gitlab 192.168.0.97 jenkins.tomcat 192.168.0.98 harbor.docker集群.git.jdk.maven 1.先 ...

  4. ubuntu18.04手动安装二进制MySQL8.0

    wget https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.13-linux-glibc2.12-x86_64.tar.xz tar xvJf ...

  5. 11点睛Spring4.1-Property Editor

    11.1 Propert Editor property editor是JavaBeans API的一项特性,用来字符和属性值之间的互相转换(如2014-03-02和Date类型的互相转换) spri ...

  6. PyCharm安装及其使用

    1.前提:Python+selenium的安装教程如下网址 https://www.cnblogs.com/linxiu-0925/p/9597634.html 2.PyCharm安装 1.首先去Py ...

  7. sonar：查询全部项目的bug和漏洞总数（只查询阻断/严重/主要级别）

    1.统计所有项目主要以上的漏洞和bug -- 统计所有项目主要以上的漏洞和bug ,) AND severity IN('BLOCKER','CRITICAL','MAJOR') 2.统计所有某个项目 ...

  8. Django 高级视图

    一.Django限制请求method 常用的请求method: GET请求:GET请求一般用来向服务器索取数据,但不会向服务器提交数据,不会对服务器的状态进行更改.比如向服务器获取某篇文章的详情. P ...

  9. Flask项目中使用mysql数据库启动项目是发出警告

    Flask项目中使用mysql数据库启动项目是发出警告: Warning: (1366, "Incorrect string value: '\xD6\xD0\xB9\xFA\xB1\xEA ...

  10. SQL语言的分类（DQL、DML、DDL、DCL的概念与区别）

    SQL语言共分为四大类:数据查询语言DQL,数据操纵语言DML,数据定义语言DDL,数据控制语言DCL. 1. 数据查询语言DQL数据查询语言DQL基本结构是由SELECT子句,FROM子句,WHER ...