移动端H5音频与视频问题及解决方案 - WEB前端 - 伯乐在线
& 移动端H5音频与视频问题及解决方案
最近在研究用视频代替动画，已经初步有成果了，顺便总结下几年开发中遇到的实际问题及给出自己的解决方案
看下最后实际效果：兼容PC，iphone， 安卓5.0
解决了，手动，自动，不全屏的问题
左边视频代替了动画，然后支持背景蒙板效果，能够透出底图
右边是原视频文件
H5 audio音频
每次通过 new Audio 一个音频对象，在IOS上可以看到会产生一个新的线程，这个很恶心
解决方案：
new Audio一个对象，通过替换不同的音频地址，达到不多开线程的目的
在安卓上支持不给力
解决方案：
低版本安卓上的问题没解，一般是混合开发都是可以调底层接口处理的，比如 phonegap
iphone上不能自动播放
解决方案：
iphone上自动播放，是IOS设计的的时候做的一个处理，貌似是为了防止自动盗用流量吧
简单来说，需要模拟用户手动去触发才可以
所以我们需要在最开始调用这样一段代码：
这是我项目上的，我就直接扣过来了
JavaScript
//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = false
var fixaudio = function() {
if (!isAudio) {
Xut.fix.audio = new Audio();
document.removeEventListener('touchstart', fixaudio, false);
document.addEventListener('touchstart', fixaudio, false);
12345678910111213
//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可Xut.fix = Xut.fix||{};if (Xut.plat.isBrowser && Xut.plat.isIOS) {&&&&var isAudio = false&&&&var fixaudio = function() {&&&&&&&&if (!isAudio) {&&&&&&&&&&&&isAudio = true;&&&&&&&&&&&&Xut.fix.audio = new Audio();&&&&&&&&&&&&document.removeEventListener('touchstart', fixaudio, false);&&&&&&&&}&&&&};&&&&document.addEventListener('touchstart', fixaudio, false);}
假如在body上绑定这样一个代码：通过手动触发创建一个audio对象，然后保存在全局中
在使用的时候如下
JavaScript
//如果为ios browser 用Xut.fix.audio 指定src 初始化见app.js
if (Xut.fix.audio) {
audio.src =
audio = new Audio(url);
audio.autoplay =
audio.play();
1234567891011
//如果为ios browser 用Xut.fix.audio 指定src 初始化见app.jsif (Xut.fix.audio) {&&&&audio = Xut.fix.audio;&&&&audio.src = url;} else {&&&&audio = new Audio(url);}audio.autoplay = true;audio.play();
直接替换音频对象即可，简单来说，就是要自动就必须是用户触发创建的对象才能播
H5 video音频
视频标签可能在移动端用的很少，安卓支持太烂了，目测5.0才好转
iphone上老问题，不能自动播放（省流量啊，省你妹!!!），并且默认就是全屏控件播放
很长一段时间里，我都没理会这个视频处理，安卓用底层，iphone直接用，内置flash与h5切换的，flash也有支持问题
前阵子老板有个需求，我们应用动画太多了，都是精灵路线的组合动画，一个app下来上百M 到几百M不等
所以急需有一个方案可以压缩图片
最后的方案是采用视频代替动画，因为视频压缩技术发展了很多年，已经十分成熟了。现在视频压缩技术，能够很轻松地将720P的
高清电影，压缩到10M/分钟，或者160K/秒。比图像序列的文件尺寸，至少小了几十倍。同时，在于大部分设备，都支持对视频的
硬件解压缩，这样呢，视频播放的CPU消耗很低，电池消耗也很低，同时播放速度还快。即使25帧的全屏幕播放，也能轻易地实
方案定下来，需要解决的几个问题就来了
整个视频，包括视频中的某些物体，能够响应用户的点击、滑动之类的操作
在iPhone下面，可以在一个窗口中播放
能够过滤掉背景，从而能像PNG图像一样运用
最后的实际效果也是开始gif动画所示：
视频代替了动画，然后支持背景蒙板效果，能够透出底图
同时也解决了，手动，自动，不全屏的问题
iphone窗口化
解决方案：
通过canvas + video标签结合处理
原理： 获取video的原图帧，通过canavs绘制到页面
这里我直接附上源码把，代码写的一般，但是突出了几个重点
可能感兴趣的话题
我也是遇到 iphone上不能自动播放问题，能否请教你 这个问题吗？
o 138 回复
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2018 伯乐在线【video标签的问题，手机端打开为什么就越界了，怎么解决呢】【wordpress吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：44,195贴子：
【video标签的问题，手机端打开为什么就越界了，怎么解决呢】收藏
为什么图片img就不会呢，有没有什么办法呢
百度云wordpress,按需购买,免于复杂的用量估计,随买随用,精确调配,灵活扩展.百度强大技术支撑.系统稳定.提供多种操作系统和集成环境.
图片手机端就自动缩进了
发表文章时尝试给他改成居中，然后试试，如果不行，请调试CSS
太宽了，调小点就好
登录百度帐号经验6410 米
在线时间452 小时
版本8.3.29
积分 7073, 距离下一级还需 12927 积分
积分 7073, 距离下一级还需 12927 积分
机型小米手机4
签到次数252
MIUI版本8.3.29
DS File 和 DS Video都能在线播放群晖NAS中的视频。
但是自从更新了 7.11.23 和 7.11.30 以后只要一播放视频就立即崩溃(离线视频则正常），100%必现。
两个应用都未双开，手机也未开启分身空间，但都已开启应用锁
这两个APP并没有自己内嵌播放器模块，也不依赖NAS中的H5播放器模块工作，而是在播放时调用本地其他APP的播放功能。我已清除默认视频播放器配置，点击视频后本应该弹出选择打开方式的窗口，但是在弹出此窗口前就已崩溃，这说明并不是本地其他APP播放器的问题。
DS File 版本从 4.10.0 到 4.10.5（最新版）均有此问题
DS Video 版本从 3.3.1 到 3.3.3（最新版）也均有此问题
这些版本在 7.11.23 之前的 MIUI 9 中均无此问题。
同时已经确定不是 File Station 或 Video Station 服务端套件的问题，因为相同的服务端和客户端版本在 MIUI 8 中能够正常播放视频不崩溃，测试机型为小米平板1。
并且此问题在 http 和 https 两种协议中均存在，在4G网络或者WLAN连接下也均存在。
路由器和NAS已实现内网穿透，手可以通过固定域名加端口的方式直接访问 NAS，并没有通过群晖的 QuickConnect 中继服务，崩溃问题在 NAS 内网和外网均存在。
打开 DS File 或者 DS Video，随便播放一个在线视频都会崩溃。
本帖最后由 暗夜如歌 于
00:28 编辑
Screenshot_-21-30-18-385_com.synology.DSfile.png (193.1 KB, 下载次数: 0)
Screenshot_-21-31-19-838_com.synology.dsvideo.png (195.94 KB, 下载次数: 0)
分享到微信朋友圈
打开微信，点击底部的“发现”，使用 “扫一扫” 即可将网页分享到我的朋友圈。
在互联网未来的私有化阶段，每个人将会自己扛起所有的责任和义务，同时收回本该属于自己的权利。
经验1321 米
在线时间60 小时
版本8.4.26
机型小米6X
签到次数106
MIUI版本8.4.26
请问当前问题是系统更新后出现的吗？
经验6410 米
在线时间452 小时
版本8.3.29
积分 7073, 距离下一级还需 12927 积分
积分 7073, 距离下一级还需 12927 积分
机型小米手机4
签到次数252
MIUI版本8.3.29
请问当前问题是系统更新后出现的吗？
是的，7.11.23之前的开发版都不正常，7.11.23和7.11.30就有问题了
在互联网未来的私有化阶段，每个人将会自己扛起所有的责任和义务，同时收回本该属于自己的权利。
经验6410 米
在线时间452 小时
版本8.3.29
积分 7073, 距离下一级还需 12927 积分
积分 7073, 距离下一级还需 12927 积分
机型小米手机4
签到次数252
MIUI版本8.3.29
请问当前问题是系统更新后出现的吗？
7.11.23之前的开发版都正常，7.11.23和7.11.30有问题
在互联网未来的私有化阶段，每个人将会自己扛起所有的责任和义务，同时收回本该属于自己的权利。
经验381 米
在线时间12 小时
版本7.11.23
积分 269, 距离下一级还需 231 积分
积分 269, 距离下一级还需 231 积分
机型Google Nexus 7
签到次数32
MIUI版本7.11.23
我也遇到同样的问题，1123以后的版本
经验4265 米
在线时间4 小时
版本V9.5.15.0.ODGCNFA
积分 4272, 距离下一级还需 728 积分
积分 4272, 距离下一级还需 728 积分
机型小米MIX2S
签到次数419
MIUI版本V9.5.15.0.ODGCNFA
同样的问题，亟待解决！
经验2116 米
在线时间35 小时
版本7.11.16
MiPad内测组成员
积分 2205, 距离下一级还需 2795 积分
积分 2205, 距离下一级还需 2795 积分
机型Samsung N9005
签到次数145
MIUI版本7.11.16
Screenshot_-22-42-03-915_com.miui.bugreport.png (298.43 KB, 下载次数: 0)
Screenshot_-22-42-00-691_com.synology.dsvideo.png (274.24 KB, 下载次数: 0)
经验6410 米
在线时间452 小时
版本8.3.29
积分 7073, 距离下一级还需 12927 积分
积分 7073, 距离下一级还需 12927 积分
机型小米手机4
签到次数252
MIUI版本8.3.29
请问当前问题是系统更新后出现的吗？
没更新系统，现在又莫名其妙的好了，有云控策略？
在互联网未来的私有化阶段，每个人将会自己扛起所有的责任和义务，同时收回本该属于自己的权利。
经验6410 米
在线时间452 小时
版本8.3.29
积分 7073, 距离下一级还需 12927 积分
积分 7073, 距离下一级还需 12927 积分
机型小米手机4
签到次数252
MIUI版本8.3.29
请问当前问题是系统更新后出现的吗？
还是会崩溃，还是有问题
在互联网未来的私有化阶段，每个人将会自己扛起所有的责任和义务，同时收回本该属于自己的权利。
经验205 米
在线时间8 小时
版本V9.2.2.0.MBECNEK
积分 215, 距离下一级还需 285 积分
积分 215, 距离下一级还需 285 积分
机型红米手机4 高配版
MIUI版本V9.2.2.0.MBECNEK
我遇到了同样的问题，希望赶紧解决
2018新年勋章
参与回帖活动
APP 1000万
MIUI论坛APP注册用户突破1000万纪念勋章
MIUI 3000万
MIUI 3000万发烧友纪念勋章
MIUI 2000万
MIUI 2000万发烧友纪念勋章
1000万用户纪念勋章
MIUI1000万用户纪念勋章
MIUI三周年
MIUI三周年纪念勋章
已关注极客秀微信
已关注微信
关注腾讯微博
已关注腾讯微博
关注新浪微博
已关注新浪微博
MIUI 9纪念勋章
发烧友俱乐部
发烧友俱乐部
MIUI七周年
Copyright (C) 2017 MIUI
京ICP备号 | 京公网安备34号 | 京ICP证110507号如何让android 手机支持 html5 video 标签 播放_android吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：1,263,538贴子：
如何让android 手机支持 html5 video 标签 播放收藏
如何让android 手机支持 html5 video 标签 播放 m3u8 格式
android开发教程极客营120天=2年以上工作经验,名师授课,项目实战,名企定制六大校区供您选择
前排———也许你认为我疯狂,　　　　就像我认为你太过平常。
没有吧友解答么！？！？
支持htm5的网页得看浏览器吧。。。　　　--我就是呼啸随风，请不要眼熟我～～
→_→不是自带浏览器都可以用html5的在线播放功能么　————来自华为C8813【魅力天成，自然心动】
登录百度帐号