zoukankan      html  css  js  c++  java
  • 关于video标签移动端开发遇到的问题,获取视频第一帧,全屏,自动播放,自适应等问题

    最近一直在处理video标签在IOS和Android端的兼容问题,其中遇到不少坑,绝大多数问题已经解决,下面是处理问题经验的总结:

       1.获取视频的第一帧作为背景图;

          技术:canvas绘图

         

    window.onload = function(){
    var video = document.getElementById('video');
    //使用严格模式
    'use strict';
    //第一帧图片与原视频的比例
    var scal = 0.8;
    //监听页面加载事件
    video.addEventListener('dataLoad',function(){
    //创建一个画布
    var canvas = document.createElement('canvas');
    canvas.width = video.style.width*scal;
    canvas.height = video.style.height*scal;
    //绘制图片
    canvas.getContentext('2d').drawImage(video,0,0,canvas.width,canvas.height);
    //设置标签的poster属性
    viseo.setAttribute("poster",canvas.toDataURL("image/png"));

    });
    }

    2.禁止安卓手机自动全屏

      video标签在安卓系统下,默认全屏,通过添加属性可以禁止全屏,

      x5-playsinline="true",切记添加该属性后不能再有x5-video-player-type='h5' x5-video-player-fullscreen='true',否则还会默认全屏

    3.播放视频时,不能完全覆盖的问题

     此时需要给video标签添加style样式

    100%;height:100%;object-fit:fill;

    此外,video标签的父元素应该设置宽高:100%;height:100%;

    4.自动播放问题

    在pc端,只需要给video标签加上autoplay = 'autoplay'属性即可,

    在移动端需要使用js判断

    首先应在也页面中引入<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>

    $('#video_play').play();
        
    document.addEventListener('WeixinJSBridgeReady', function () {
                    $('#video_play').play();
                
    }, false);

    在安卓中,是无法实现加载后自动播放功能的,需要引到用户产生行为,触发事件,

  • 相关阅读:
    GNU make manual 翻译(九十九)
    GNU make manual 翻译( 九十五)
    Shell的 for 循环小例子
    makefile中对目录遍历的小例子
    GNU make manual 翻译(九十三)
    GNU make manual 翻译( 一百)
    GNU make manual 翻译( 九十七)
    GNU make manual 翻译( 九十八)
    mapserver4.8.3 的readme.win32的中文翻译文件
    遥控器编程
  • 原文地址:https://www.cnblogs.com/zhang-jiao/p/10606587.html
Copyright © 2011-2022 走看看