最近做了一些嵌入视频的活动,积累了点视频方面的经验,下面记录下别人和自己踩过的坑以及相应的解决方案。
1、碰到问题和解决方案
1.1、ios 网页中播放视频默认全屏(点击视频会弹出播放器进行全屏播放)。
解决不全屏播放可以添加下列属性webkit-playsinline='true' 和 playsinline='true' 如果设置上面属性还没有效果,那么可以再配合下面这个插件试试。 iphone-inline-video
备注:ios下在微博中打开网页播放视频会弹出播放器播放,设置playsinline属性无效,还必须使用上面那个插件,亲测有效。
1.2、andriod中video播放完后显示推荐视频
移动端浏览器中的video元素是比较特别的,早期无论是在iOS还是Android的浏览器中,它都位于页面的最顶层,无法被遮盖。后来这个问题在iOS下得到了解决,但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的渲染引擎,它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题。通过设置

x5-video-player-type="h5" 可以开启同层播放器,来避免播放后显示推荐视频的问题。
x5-video-player-fullscreen="true" //视频全屏播放
x5-video-orientation="portrait"//视频竖屏模式播放

1.3、视频的适配
目前设计师一般是按照iphone5或者iphone7的标准去设计视频,一般可以通过宽高100%来播放视频,如果发现视频还是不行那么就需要根据实际情况设置 object-fit属性来解决了。 详见半深入理解CSS3 object-position/object-fit属性
备注:在webkit内核浏览器下,默认是object-fit:contain。
1.4、js控制视频的播放
在ios中视频和音频一般都不会主动播放,除非用户主动去点击,所以需要通过js来监听界面的交互来控制视频的播放。
视频的播放和暂停主要是调用play和pause方法。 而视频播放过程中如果需要一些用户的交互主要是通过timeupdate方法来监听当前的播放时间,看一段代码:

var isStop = false;
videoElem.on('timeupdate', function () {
var curTime = parseInt(videoElem[0].currentTime);
if (curTime == 152) {//该时间点展示交互蒙层
$('.js_first_stop').removeClass('hide');
} else if (curTime > 152 && curTime == 153) {
if (!isStop) {//解决ios暂停后再次点击播放不了问题,因为该处触发了多次,但是andriod没有该问题。
isStop = true;
videoElem[0].pause();
}
} else if (curTime == 248) {
$('.js_second_stop').removeClass('hide');
}
});

在ios中监听timeupdate事件并暂停的视频的时候需要引入一个全局的isStop变量,不然下次点击继续播放的时候没反应(timeupdate的时候触发了多次暂停),但是andriod是没有这个问题的。 判断视频结束可以监听视频的ended事件

videoElem.on('ended',function(){});

或者监听视频的timeupdate事件,然后判断ended属性,如果为true则表示结束,false表示未结束。

videoElem.on('timeupdate',function(){
if(videoElem[0].ended){
//播放结束
}
}

另外在andriod端开启了同层播放器,微信端也提供了2个监听进入同层播放器和退出同层播放器的事件。 进入同层播放器事件(开始播放视频)。

videoElem.on("x5videoenterfullscreen", function(){}

点击左上角返回键退出同层播放器。

videoElem.on('x5videoexitfullscreen',function(){}

最后需要注意的是在andriod端播放视频后是不会主动退出同层播放器的。后续如果有展示的界面,也会在播放器中展示,感觉很怪异。这里可以通过链接跳转来解决。
1.5、canvas播放视频
canvas可以播放视频,但是在某些andriod机上会看到有很严重的锯齿,并且有些andriod浏览器播放的时候只有声音而没有图像。
1.6、视频编码
mp4格式的视频要h.264编码方式,不然某些ios只有声音而没有图像。
最后,一个完整的video配置的如下,仅供参考

<video class="js_video" style="object-fit: cover; width: 100%; height: 100%;" preload="load"
playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
x5-video-orientation="portrait"src="https://video.mdcdn.cn/friend2018.mp4"></video>

H5视频活动踩坑的更多相关文章

  1. Cocos闪屏视频VideoPlayer踩坑记录

    游戏闪屏动画(Logo&健康游戏公告)使用了 experimental::ui::VideoPlayer 来播放视频 3.7版本开发到目前为止发现2个坑 1.设置大小 _videoPlayer ...

  2. Taro 开发踩坑指南 (小程序,H5, RN)

    Taro 开发踩坑指南 (小程序,H5, RN) css taro 如何展示多行文本省略号 https://www.cnblogs.com/xgqfrms/p/12569057.html UI 设计稿 ...

  3. html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示

    1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...

  4. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  5. 【腾讯Bugly干货分享】H5 视频直播那些事

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...

  6. 【踩坑记】从HybridApp到ReactNative

    前言 随着移动互联网的兴起,Webapp开始大行其道.大概在15年下半年的时候我接触到了HybridApp.因为当时还没毕业嘛,所以并不清楚自己未来的方向,所以就投入了HybridApp的怀抱. Hy ...

  7. SQL Server 在Alwayson上使用内存表"踩坑"

    200 ? "200px" : this.width)!important;} --> 介绍 因为线上alwayson环境的一个数据库上使用内存表.经过大概一个星期监控程序发 ...

  8. 【踩坑记录】记一次MySQL主从复制延迟的坑

    最近开发中遇到的一个MySQL主从延迟的坑,记录并总结,避免再次犯同样的错误. 情景 一个活动信息需要审批,审批之后才能生效.因为之后活动要编辑,编辑后也可能触发审批,审批中展示的是编辑前的活动内容, ...

  9. 利用vue-router和compoment重构代码--踩坑(一)

    业务主要功能 获取所有的数据库列表 点击某一个数据库列表的时候,右侧分页展示数据 点击右侧某一条数据的时候,现实数据详情 以下是之前的页面,存在以下问题: 前段开发没有工程化(webpack) 主要功 ...

随机推荐

  1. Java服务,内存OOM问题如何快速定位? (转)

    转自:公众号  架构师之路 问题:有一个Java服务出现了OOM(Out Of Memory)问题,定位了好久不得其法,请问有什么好的思路么? OOM的问题,印象中之前写过,这里再总结一些相对通用的方 ...

  2. Linux-2.1vim简单使用

    1.用vim打开文件,文件内容显示在终端,命令模式无法编辑 vim 1.txt vi 1.txt 2.使用a,i,o,shift+o编辑文件,按Esc退出编辑模式 i 插入在光标前 a 插入在光标后 ...

  3. sql--Drop语句

    通过使用 DROP 语句,可以轻松地删除索引.表和数据库. SQL DROP INDEX 语句 我们可以使用 DROP INDEX 命令删除表格中的索引. 用于 Microsoft SQLJet (以 ...

  4. JS基础_js编写位置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 错误信息 NSError

    一.获取系统的错误信息 比如移动文件时,获取文件操作错误: NSError *e = nil;[[NSFileManager defaultManager] moveItemAtPath:source ...

  6. 基于Chromium的浏览器已上线通用“显示密码”按钮

    基于Chromium的Edge在日前发布的Canary通道版本中,对用户界面进行了优化调整从而让InPrivate窗口变得更加简洁.在今天获得的版本更新中,微软继续带来了隐私相关的新内容--实现通用的 ...

  7. CLI

    命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行. ...

  8. P2197 【模板】nim游戏

    博弈初心者... 学习地址luogu上可以找到.关于比较好的证明地址放在了地址页里了.这里不再赘述. 大概感觉还是所谓先手必胜就是面对当前局面一定可以采取一种策略,然后后手无论再怎么做,先手都可以“控 ...

  9. 【winform-窗体快捷键】定义功能窗体快捷键,非全局

    这里的快捷键并非系统全局快捷键.仅是普通的当窗体在焦点内发生.有很多种方法,这里列举几种项目中使用到的方法. Alt+*(一般控件快捷键) 这个比较简单,只需为该控件的Text属性声明时加上”(&am ...

  10. UVA 12063 Zeros and ones 一道需要好好体会的好题

    #include<bits/stdc++.h> #include<stdio.h> #include<iostream> #include<cmath> ...