video 播放
视频播放是个坑。。。
HTML5 Video API : https://www.w3.org/2010/05/video/mediaevents.html
虽然界面很丑,但是事件、属性很全。
进行视频操作前务必查阅。
很多属性事件在手机端无法获取。。。
具体可参考:http://www.xuanfengge.com/html5-video-play.html
(之后补全可获取的属性事件)
ios与安卓 均支持以下属性:
video.ended
video.currentTime
一、ios端控制视频播放
<video src=" " id="video" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
></video>
1.目前只有ios7+、winphone8+支持自动播放
2.支持Airplay的设备(如:音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放视频不全屏,ios7、、winphone8+支持,部分android4+支持(含华为、小米、魅族)
webkit-playsinline="true"
4.ios 10 : playsinline
5.ios 8、9 :https://github.com/bfred-it/iphone-inline-video
二、安卓端控制视频播放
安卓上的微信调用X5浏览器内核,视频样式无法自定义。。。
X5浏览器内核遇到的问题具体可参考以下链接:
https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/
x5-video-player-type
启用同层播放。取值固定为'h5'
。
x5-video-player-fullscreen
是否全屏。取值为'true'
或'false'
。
1.安卓上只有在 WeixinJSBridgeReady 这个事件下才能使视频自动播放!!!
例:
document.addEventListener("WeixinJSBridgeReady", function () { $("#video").play(); });
2.安卓上只有用户进行点击等触发事件才能播放视频,不可以在点击事件后设置 setimeout 控制视频多少秒后进行播放,不然会出现video的播放按钮(安卓下的默认样式),仍需用户点击才能播放。
3.video的层级默认最高,如需在video上添加封面等高于video层级的图层,需要将video的宽高设为0,播放视频时需要重新设置video的宽高。
$('#video').width(0).height(0);
$('#video').width(640).height(1040).get(0).play();
video 播放的更多相关文章
- jquery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- jQ效果:jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- IOS(苹果手机)使用video播放HLS流,实现在内部播放及全屏播放(即非全屏和全屏播放)。
需求: 实现PC及移动端播放HLS流,并且可以自动播放,在页面内部播放及全屏播放功能. 初步:PC及安卓机使用hls.js实现hls流自动播放及全屏非全屏播放 首先使用了hls.js插件,可以实现在P ...
- 关于大视频video播放的问题以及解决方案(m3u8的播放)
在HTML5里,提供了<video>标签,可以直接播放视频,video的使用很简单: <video width="320" height="240&qu ...
- video播放视频以及相关事件
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- 网页前端video播放m3u8(HLS)
网页前端video播放m3u8(HLS) HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术,包括一个m3u8的索引文件.多个ts分片文件和key加密串文件.这项技 ...
- 关于 video 播放的新探索
前端同学要使用 HTML5 播放器视频,必然会使用 video 标签,不过大多数同学只是使用了较简单的功能,其实它本身拥有不凡之力有待我们发现. 首先,我们先来看下 video 最基础的用法: 使用 ...
- HTML5 - 使用<video>播放视频
,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件) <video src="hangge.mp4" controls></vid ...
- HTML5 video 播放视频黑屏
<video width="320" height="240" controls> <source src="movi ...
随机推荐
- golang调用c++文件
简要步骤: 1,将c++ 的方法提取到头文件.h中( ) 2,编译cc(c++)文件为动态链接库so文件 3,将头文件放入include目录 .so放入lib目录 4,go程序中指定 CFLAGS 和 ...
- 一些kvm虚拟机操作的命令
创建一个40G的raw的磁盘 seek= 将raw磁盘转化为qcow2 qemu-img convert -f raw -O qcow2 disk.img disk.qcow2 将qcow2文件再压缩 ...
- HBASE基础知识
HBASE的集群的搭建HBASE的表设计HBASE的底层存储模型 HBase 是一个高可靠.高性能.面向列.可伸缩的分布式缓存系统.利用HBase 技术可在廉价PC Server上搭建起大规模结构化存 ...
- storage disk
scsi fdisk -l can not display the new disk Rescan the SCSI Bus to Add a SCSI Device Without rebootin ...
- R扩展包
log10() .libPaths()#查看R包目录 library()#查看以前安装的函数 search() #安装R包的方式 install.packages("car")#安 ...
- MICAPS数据文件格式
MICAPS系统的数据结构是建立在文件系统基础上的.其特点是: l 利用目录来区分不同的数据来源.要素和层次,即不同的数据来源.要素和层次的数据要放在不同的目录中.同一目录中的数据只能有时次或时效上 ...
- Infinite V1 Release Note
游戏地址 PLAY 玩法说明 WASD 控制角色移动 更新内容 - 初步完成了角色移动(攻击状态) 开发心得 独立做游戏 其实最耽误时间的就是在自己的短板上, 对于我来说 就是3D建模和动作制作. ...
- LeetCode: Product of Array Except Self
Dynamic Programming public class Solution { public int[] productExceptSelf(int[] nums) { int[] ans = ...
- Extjs 3.4 同值合并
摘自:http://www.cnblogs.com/kunpengit/archive/2012/11/13/2768239.html/** * grid gridPanel 需要合并的表格 * ro ...
- [nodejs] Error: unable to verify the first certificate
Error: unable to verify the first certificate Solution npm config set registry http://registry.npmjs ...