最近在做手机端上面播放视频的项目，但是在安卓上面，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. 测试一下windowsLiveWriter

    一个是看看这个东西能不能发布出博客,还有一个就是准备开始写博客了,所以随便写个作为开始吧,我不想多说什么目标啊,什么的,所以就这一句简单的一句话就够了.

  2. java获取当前路径的方法

    1.System.getProperty("user.dir") 函数获取当前路径 // 获取当前路径方式1 System.out.println(System.getProper ...

  3. MD5Encrypt加密

    package utils; import java.security.MessageDigest; public class MD5Encrypt { public MD5Encrypt() { } ...

  4. PAT 甲级 1144 The Missing Number (20 分)(简单,最后一个测试点没过由于开的数组没必要大于N)

    1144 The Missing Number (20 分)   Given N integers, you are supposed to find the smallest positive in ...

  5. js Date.parse()时区问题

    比较两个时间,parse() 方法可解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数.Date.parse时间多了8小时. 正确的方法: var nowDate = Dat ...

  6. 学习activiti的时候使用truncate命令清空表

    参考文档: https://blog.csdn.net/iw1210/article/details/79586033 https://www.cnblogs.com/hougang/p/mysql_ ...

  7. Underscore.js 的模板功能

    Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能. 无论你写一段小的js代码,还是写一 ...

  8. WPF 使用winform的webbrowser

    首先要添加如下引用: WindowsFormsIntegration System.Drawing System.Windows.Forms 然后在xaml中添加引用 xmlns:winform=&q ...

  9. mac 上更改环境变量

    第一次配置Mac的环境变量,到网上转了一圈才找到正确方法. 打开终端,新建.bash_profile文件在~/目录下(如果电脑里已经有了这个文件,跳过这一步) touch ~/.bash_profil ...

  10. linux 下mongo 基础配置

    配置文件dbpath=/usr/local/mongodb/dblogpath=/usr/local/mongodb/log/mongo.logport=27017fork=truejournal=f ...