Video标签的问题
来源:互联网 发布:淘宝卖情趣内衣怎么样 编辑:程序博客网 时间:2024/05/20 03:41
APP、M站下的H5Video标签问题
- 全屏播放、竖屏和横屏
- 封面图问题
- 自动播放
- 直播
- html5和flash的播放源选择
全屏播放:
APP下,Android手机不支持全屏,IOS只支持竖全屏
M站下,根据不同浏览器,可能有不同表现:例如UC浏览器是支持横竖全屏的,但是原生Safari则不支持
结论:Video标签全屏依靠浏览器(APP)的控制,需要关注APP是否设置禁用了相应的接口。否则只能用CSS或者JS来监测全屏再Hack处理。
video全屏的处理
IOS自动竖全屏
ios下设置了webkit-playsinline="true" playsinline
以后,就可以不全屏播放
封面图问题
在ios下,视频被嵌入后,媒体的元数据加载完成后,会以全屏的形式显示出来,或者加个poster,可以看到画面。但在android下,多数机子是不显示视频画面的,要不就是显示一个黑色的还不是全屏的播放控件,即使及加个poster封面也不济于是。因为poster在android兼容的并不好,不如在视频上层加个div铺张图片,这个比较好的处理方式应该是:视频上加一层div做封面,由于android不允许视频上层有东西,所以首先将视频设为的width:1px
,当播放后,上层的封面remove掉,同时width:100%
或者你想要的宽度。
自动播放:
在Android下无法通过设置autoplay,在IOS上,除非是无声音,否则无法自动播放。(IOS新法案)。如果想用js控制播放,也必须要用户第一次点击了屏幕后才可以进行(touchstart事件)
IOS10视频播放新政策
至于「用户主动操作」具体指的是哪些行为,苹果官方有详细的说明:
- 点击视频播放按钮;
- 触发
touchend
、click
、doubleclick
或keydown
事件,且在事件处理函数中直接调用video.play()
方法。显然,button.addEventListener('click', () => { video.play(); })
满足要求;而video.addEventListener('canplaythrough', () => { video.play(); })
不满足要求;值得注意的是,上面讨论的是 iOS 自带 Safari 的视频播放政策。对于 iOS APP 而言,开发者在给 webview 设置
mediaPlaybackRequiresUserAction
和allowsInlineMediaPlayback
属性之后,页面中的` 标签就可以通过
autoplay和
webkit-playsinline` 属性来启用自动播放和内联播放功能。
使用折中方案:当用户第一次touch的时候,触发play,让视频播放。同时设置playsinline
和autoplay
方法,提供给安卓全屏
window.addEventListener('touchstart', function videoStart() { hidePlayIcon(); $('#videosrc')[0].play(); this.removeEventListener('touchstart', videoStart); });
其他问题:
直播场景下尝试过优酷打通,但是没试过直接做成直播平台的方案。
HTML5和Flash选择,通常而言,flash播放是做为HTML的降级处理。也可以通过组件库(像video.js)来帮忙解决。
附:友军的播放器选择~
手淘的历程 — 参考FED文章
- 原生 HTML5 video 标签
- Android 5.3.2 版本之后的 UC 内核增强 SAC 播放器
- Android 5.4.9 版本之后的 UC HAC 播放器
- Android 5.3.2 版本之前的 Glue native 播放器
- Android 5.3.2 版本及其之后的 PlayBuddy 播放器
附:Video标签的增强库~
video的组件vedio.js 和 player.js
playerjs.io,video.js博客园介绍
参考
安卓手机HTML5 video全屏播放实例代码
HTML5的video标签对视频的播放方向是如何处理的?
移动web开发之——iso中的video
视频播放的那些事-FED
- Video标签的问题
- <video>标签的属性
- html5的video标签
- HTML5的video标签
- html5 video标签不能播放mp4的问题
- html5 video标签不能播放mp4的问题
- H5 video 标签播放视频遇到的问题
- 学习html5的video标签
- 自定义video标签的大小
- Html5的video标签设置
- video标签的播发次数
- video标签支持的视频格式
- H5标签 video标签的使用
- video标签
- video标签
- video标签
- 关于H5中的<video></video>标签的用法总结
- 移动端H5的Video标签无法播放在线视频的问题
- 无线安全专题_攻击篇--干扰通信
- Elasticsearch使用中遇到的一些问题及相应解决方法
- android google map 入门 四
- python常用函数(一)
- Destroying Array
- Video标签的问题
- lintcode,复制带随机指针的链表
- 单词搜索树
- BOM案例之图片移动
- 解决Linux环境Oracle显示乱码
- 无线安全专题_攻击篇--MAC泛洪攻击
- 解决MySQL主从复制不一致的情况
- 杭电ACM1005-Number Sequence
- SQL Server锁介绍及死锁原因(转)