最近一直在处理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样式

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

此外,video标签的父元素应该设置宽高:width: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);

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

关于video标签移动端开发遇到的问题,获取视频第一帧,全屏,自动播放,自适应等问题的更多相关文章

  1. video 手机全屏自动播放

    <video src="video.mp4" id="video" x-webkit-airplay="true" webkit-pl ...

  2. video标签实现简单视频背景+遇到问题(视频无法显示,不能自动播放)

    最近看网上有一些网站首页背景是炫酷的视频背景,就想模拟一个 1.video标签简介 video标签定义视频,就是可以在网页上实现视频的播放,详情见http://www.w3school.com.cn/ ...

  3. H5移动端视频问题(苹果全屏播放问题等)

    iphone上,手动.自动.窗口化等问题 iphone窗口化 解决方案: 通过canvas + video标签结合处理 原理: 获取video的原图帧,通过canavs绘制到页面. 我们一般在苹果上在 ...

  4. video 全屏,播放,隐藏控件。

    requestFullscreen全屏具体实现 1.进入全屏 function full(ele) { if (ele.requestFullscreen) { ele.requestFullscre ...

  5. Android 使WebView支持HTML5 Video(全屏)播放的方法

    http://blog.csdn.net/zrzlj/article/details/8050633  1)需要在AndroidManifest.xml文件中声明需要使用HardwareAcceler ...

  6. Xamarin安卓开发:去掉Activity的头部标题栏及全屏显示

    http://blog.csdn.net/u012234115/article/details/35814209 以下是用修改布局文件的方法,其实还有用C#代码的方法. 打开AndroidManife ...

  7. HTML5新标签video在iOS上默认全屏播放

    今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...

  8. html-----vedio标签(HTML5新标签VIDEO在IOS上默认全屏播放)

    今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...

  9. 移动端Video标签踩坑记录

    需求 用户能在手机上上传视频并预览. 问题 上传完成后安卓下封面展示正常,ios下封面空白.如下图所示: 利用canvas截取视频第一帧发现,ios下截取到的第一帧一直是空白图片, 安卓正常. 后端利 ...

随机推荐

  1. C# 操作docx文档

    一.需要引用DocX类库文件,可以直接在NuGet中找到. 二.创建文件,并添加一张表格 public static string fileName = AppDomain.CurrentDomain ...

  2. css居中,margin_and_position

    首先父元素肯定是要相对定位的,其次我们上下左右居中的元素的css如下: width: 50px; height: 50px; margin: auto; position: absolute; lef ...

  3. pwn学习之四

    本来以为应该能出一两道ctf的pwn了,结果又被sctf打击了一波. bufoverflow_a 做这题时libc和堆地址都泄露完成了,卡在了unsorted bin attack上,由于delete ...

  4. TCP/IP详解 卷一学习笔记(转载)

    https://blog.csdn.net/cpcpcp123/article/details/51259498

  5. django自制后台左侧导航代码

    自定义一个sort.py页面: 写入一下代码: class lanmusort(object): def __init__(self): self.arr=[] def lanmuget(self,o ...

  6. JS实现快速排序,冒泡排序

    JS-排序详解-冒泡排序   说明 时间复杂度指的是一个算法执行所耗费的时间 空间复杂度指运行完一个程序所需内存的大小 稳定指,如果a=b,a在b的前面,排序后a仍然在b的前面 不稳定指,如果a=b, ...

  7. JAVA基础复习与总结<四> 抽象类与接口

    抽象类(Abstract Class) 是一种模版模式.抽象类为所有子类提供了一个通用模版,子类可以在这个模版基础上进行扩展.通过抽象类,可以避免子类设计的随意性.通过抽象类,我们就可以做到严格限制子 ...

  8. php 解决file_put_contents 不生效

    define('FILE_APPEND', 1); if (!function_exists("file_put_contents")) { function file_put_c ...

  9. Pandas 1 表格数据类型DataFrame

    # -*- encoding:utf-8 -*- # Copyright (c) 2015 Shiye Inc. # All rights reserved. # # Author: ldq < ...

  10. RSP小组——团队冲刺博客二

    RSP小组--团队冲刺博客二 冲刺日期:2018年12月11日 前言 经过第一天的冲刺,我们开始了我们冲刺之路,但是不知为什么,我们的动力并不足,首先可能是我们前期对该项目的编制过程中,因为没有经验, ...