ios支持video标签吗_video标签移动端兼容性问题总结

最近开发了一个wap版的贵金属营销直播间，直播间主要由视频区和互动区组成。视频区使用了原生的video标签实现视频播放；互动区展示了分析师和用户之间的文本对话。

直播间开发过程中遇到了不少兼容性问题，这些问题大多数都是由移动端浏览器对video标签的实现差异造成的。现总结如下：

视频无法自动播放

autoplay属性失效

HTML5标准规定：video标签设置autoplay属性后，当页面加载完成时，媒体资源将自动开始播放。

然而，在实际开发过程中发现，给video标签设置autoplay属性，在很多移动设备的浏览器中是无法实现自动播放的。

在iphone上做测试，发现autoplay属性在safari里无效、在微信里有效。查看苹果开发者中心的文档,发现苹果对video标签的autoplay属性做了如下规定：

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled.

因此，在ios系统的safari浏览器中设置autoplay是无效的；此外很多安卓机浏览器也采用了禁用autoplay的策略。

调用play()方法无效

继续在iphone上做测试，在页面加载完成后调用play()方法，尝试实现自动播放的效果。发现在safari里视频没有播放，在微信里视频开始播放。

苹果开发者中心的文档同样对ios设备上的safari浏览器中，play()方法的触发时机做了规定：

No data is load

ios支持video标签吗_video标签移动端兼容性问题总结相关推荐

chrome浏览器不支持video标签，不能自动播放。
问题:chrome浏览器不支持video标签的autoplay属性,网页刷新后不能自动播放视频. 处理: 方法一: 在video标签中加入muted="muted" 属性,但会让视 ...
html video添加字幕,HTML5标签：video元素的使用方法及作用
html元素标签是html5中新增的标签,用于定义网页文档中的视频资源文件,有关标签的使用方法及作用详解如下: 标签的定义标签可以把指定的视频资源文件插入页面中播放: 标签是 HTML 5 中新增的 ...
video/audio 音频/视频标签详解
video <video> 标签定义视频,比如电影片段或其他视频流. 可以在 <video> 和 </video> 标签之间放置文本内容,这样不支持 <vid ...
html video标签 mp3,html5中的video标签和audio标签详解
一.基础 src 音乐资源的路径 autoplay 播放 controls 控制面板 loop 循环播放 muted 初始静音 audio支持的音乐格式有mp3 ogg wav 你的浏览器太辣鸡了,不 ...
iOS开发 - ANPs推送通知标签：推送通知ANPs远程推送、本地推送
iOS开发 - ANPs推送通知标签: 推送通知ANPs远程推送本地推送 2015-05-03 14:12 3510人阅读评论(0) 收藏举报本文章已收录于: iOS知识库分类: [IO ...
Cef开发学习 - Windows平台简易的Cef浏览器，支持下载管理和多标签管理
Cef开发学习 - Windows平台简易的Cef浏览器,支持下载管理和多标签管理 PS:本系列文章主要学习介绍Cef开发相关的内容. 文章目录 Cef开发学习 - Windows平台简易的Cef浏览 ...
html标签onload,支持onload事件的HTML标签有哪些
支持onload事件的HTML标签有:"body"."frame"."frameset"."iframe"." ...
解决帝国CMS搜索页面模板不支持灵动标签和万能标签的方法
解决帝国CMS搜索页面模板不支持灵动标签和万能标签的方法参考文章: (1)解决帝国CMS搜索页面模板不支持灵动标签和万能标签的方法 (2)https://www.cnblogs.com/ityz/p ...
video 在安卓版本上小窗口播放，IOS 微信 video小屏幕播放，微信全屏video
目录: 安卓和ios微信video小窗口播放(太水,可以直接跳过) noscript标签 video移动端上面不得不说的辛酸腾讯关于video的说明文档:https://x5.tencent.com ...

ios支持video标签吗_video标签移动端兼容性问题总结

ios支持video标签吗_video标签移动端兼容性问题总结相关推荐

最新文章

热门文章