视频播放是个坑。。。

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 播放的更多相关文章

  1. jquery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  2. jQ效果:jQuery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  3. IOS(苹果手机)使用video播放HLS流,实现在内部播放及全屏播放(即非全屏和全屏播放)。

    需求: 实现PC及移动端播放HLS流,并且可以自动播放,在页面内部播放及全屏播放功能. 初步:PC及安卓机使用hls.js实现hls流自动播放及全屏非全屏播放 首先使用了hls.js插件,可以实现在P ...

  4. 关于大视频video播放的问题以及解决方案(m3u8的播放)

    在HTML5里,提供了<video>标签,可以直接播放视频,video的使用很简单: <video width="320" height="240&qu ...

  5. video播放视频以及相关事件

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  6. 网页前端video播放m3u8(HLS)

    网页前端video播放m3u8(HLS) HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术,包括一个m3u8的索引文件.多个ts分片文件和key加密串文件.这项技 ...

  7. 关于 video 播放的新探索

    前端同学要使用 HTML5 播放器视频,必然会使用 video 标签,不过大多数同学只是使用了较简单的功能,其实它本身拥有不凡之力有待我们发现. 首先,我们先来看下 video 最基础的用法: 使用 ...

  8. HTML5 - 使用<video>播放视频

    ,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件) <video src="hangge.mp4" controls></vid ...

  9. HTML5 video 播放视频黑屏

    <video width="320" height="240" controls>        <source src="movi ...

随机推荐

  1. golang调用c++文件

    简要步骤: 1,将c++ 的方法提取到头文件.h中( ) 2,编译cc(c++)文件为动态链接库so文件 3,将头文件放入include目录 .so放入lib目录 4,go程序中指定 CFLAGS 和 ...

  2. 一些kvm虚拟机操作的命令

    创建一个40G的raw的磁盘 seek= 将raw磁盘转化为qcow2 qemu-img convert -f raw -O qcow2 disk.img disk.qcow2 将qcow2文件再压缩 ...

  3. HBASE基础知识

    HBASE的集群的搭建HBASE的表设计HBASE的底层存储模型 HBase 是一个高可靠.高性能.面向列.可伸缩的分布式缓存系统.利用HBase 技术可在廉价PC Server上搭建起大规模结构化存 ...

  4. storage disk

    scsi fdisk -l can not display the new disk Rescan the SCSI Bus to Add a SCSI Device Without rebootin ...

  5. R扩展包

    log10() .libPaths()#查看R包目录 library()#查看以前安装的函数 search() #安装R包的方式 install.packages("car")#安 ...

  6. MICAPS数据文件格式

    MICAPS系统的数据结构是建立在文件系统基础上的.其特点是: l  利用目录来区分不同的数据来源.要素和层次,即不同的数据来源.要素和层次的数据要放在不同的目录中.同一目录中的数据只能有时次或时效上 ...

  7. Infinite V1 Release Note

      游戏地址 PLAY 玩法说明 WASD 控制角色移动 更新内容 - 初步完成了角色移动(攻击状态) 开发心得 独立做游戏 其实最耽误时间的就是在自己的短板上, 对于我来说 就是3D建模和动作制作. ...

  8. LeetCode: Product of Array Except Self

    Dynamic Programming public class Solution { public int[] productExceptSelf(int[] nums) { int[] ans = ...

  9. Extjs 3.4 同值合并

    摘自:http://www.cnblogs.com/kunpengit/archive/2012/11/13/2768239.html/** * grid gridPanel 需要合并的表格 * ro ...

  10. [nodejs] Error: unable to verify the first certificate

    Error: unable to verify the first certificate Solution npm config set registry http://registry.npmjs ...