最近在做手机端上面播放视频的项目，但是在安卓上面，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. pytorch如何先初始化变量，然后再赋值

    下面是定义初始化 #初始化输入的张量 - torch.empty是返回一个包含未初始化数据的张量 self.input = torch.empty(size=(self.opt.batchsize, ...

  2. 数据分析入门——numpy

    一.什么是numpy Numpy提供了一个在Python中做科学计算的基础库,重在数值计算,主要用于处理多维数组(矩阵)的库.用来存储和处理大型矩阵,比Python自身的嵌套列表结构要高效的多.本身是 ...

  3. 用python画 pareto front

    用python画 pareto front 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2D pf import os import matplotlib.pyplot as plt im ...

  4. Swift 4.0 Xib实现Button调整

    1.Xib画的界面按钮,代码中进行调整按钮图片在上,文字在下: 代码中修改按钮的位置比较好: payButton.titleEdgeInsets = UIEdgeInsetsMake((payButt ...

  5. 静态站点生成器-md-vue-vuepress

    推荐指数:

  6. Data - 【转】数据分析的道与术

    简要说明 本文来自网络流传的"百度内部培训PPT - 数据分析的道与术",版权属于"百度",如有冒犯,即刻删除. PDF下载 - 数据分析的道与术 什么是数据分 ...

  7. 未找到路径“ ”的控制器或该控制器未实现 IController。

    未找到路径“/Platform/t_spay_sub_mchno/Index”的控制器或该控制器未实现 IController. 从SVN复制了份代码修改,然后找不到控制器和页面.在项目属性-WEB- ...

  8. 解决RedisDesktopManager连接不上redis问题

    linux 下安装redis很简单,在此不做赘述 发现linux上启动redis,测试redis使用正常, 但使用RedisDesktopManager却连接不上,报错如下,报错信息显示:当前使用的P ...

  9. k8s SLUB: Unable to allocate memory on node -1 错误

    Try to Fix Two Linux Kernel Bugs While Testing TiDB Operator in K8sWed, May 1, 2019 Wenbo Zhang Auth ...

  10. DeviceEventEmitter React-Native 发送和接受消息（事件监听器）

    A页面注册通知: import {DeviceEventEmitter} from 'react-native'; //… //调用事件通知 DeviceEventEmitter.emit('xxxN ...