音频、视频常用标签属性
-
airplay
远程播放功能
x-webkit-airplay="true"
airplay="allow" -
playsinline
webkit-playsinline="true"
视频播放时局域播放，不脱离文档流 。
这个属性需要嵌入网页的APP
比如WeChat中UI的webview
allowsInlineMediaPlayback = YES
webview.allowsInlineMediaPlayback = YES，才能生效。 -
muted
添加了这个属性，就可以自动播放了
muted 属性是一个 boolean(布尔) 属性。
muted 属性设置或返回音频/视频是否应该被静音（关闭声音）。
问题
为了更好的提升用户体验，浏览器厂商不希望视频自动播放，所以audio标签上的autoplay属性，在浏览器限制下，可能不好使
主要的问题有：
- 渐进性、向下兼容优化
关于音频，可以在浏览器切换当前窗口显示与否时候，对音频进行处理，减少音乐对用户影响
try{
document.addEventListener("visibilitychange", function() {
var _visibilityState = document.visibilityState;
if (_visibilityState === 'visible') {
//backgroundMusic.play();
} else {
//backgroundMusic.pause();
}
});
}catch(err){ }
- 阻止IOS系统手机，全屏播放视频
playsinline这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放
//video标签挂载属性
webkit-playsinline="true"
playsinline="true"
- 关于video设置autoplay自动播放
-
PC浏览器不生效
浏览器需要权限
需要用户手动，打开浏览器权限
建议的方案：
通过引导用户点击，调用JS脚本来使视频播放 ( 无需上面浏览器授权 ) -
微信浏览器环境下，可以通过WeixinJSBridgeReady事件，来自动播放
IOS iphone plus7 可以
安卓 小米5 可以，按照以往经验，应该是安卓机不支持的
//--html
<video
id="banVideo"
x-webkit-airplay="true"
webkit-playsinline="true"
playsinline="true"
poster="videos/video2.jpg"
autoplay
preload="auto"
>
<source src="videos/video2.ogv" type="video/ogg"></source>
<source src="videos/video2.webm" type="video/webm"></source>
<source src="videos/video2.mp4" type="video/mp4"></source>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
//----js 代码
//浏览器对象
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
//IE内核
presto: u.indexOf('Presto') > -1,
//opera内核
webKit: u.indexOf('AppleWebKit') > -1,
//苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
//是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
//ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
//android终端
iPhone: u.indexOf('iPhone') > -1,
//是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1,
//是否iPad
Safari: u.indexOf('Safari') > -1,
//是否Safari
weixin: u.indexOf('MicroMessenger') > -1,
//是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
} (),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
//获取video元素
var oBanVideo = document.getElementById('banVideo');
//添加事件
function addHandler(element,type,handler) {
var isIE8 = !+"\v1";
if(element.addEventListener){
//检测是否为DOM2级方法
element.addEventListener(type,handler,{ passive: false });
}else if(element.attachEvent){
//检测是否为IE级方法
if(!isIE8){
//--IE9+
element.attachEvent("on" + type, function () {
//通过call或者apply解决IE下this指向问题
handler.apply(element);
});
}else{
//--IE8↓
element["on" + type] = handler;
};
}else {
//检测是否为DOM0级方法
element["on" + type] = handler;
}
};
//播放
function playFn(){
oBanVideo.play();
//调整声音 -- volume 属性设置或返回视频的当前音量，从 0.0 (静音) 到 1.0 (最大声)。
if(oBanVideo.volume){
oBanVideo.volume = 0.8;
}
}
//微信浏览器自动播放
if(browser.versions.iPhone && browser.versions.weixin){
//微信webview全局内嵌，WeixinJSBridgeReady方法
addHandler(document,"WeixinJSBridgeReady",playFn);
}
-
移动端一般浏览器播放情况
IOS safari 无法自动播放
安卓 小米机百度 无法自动播放，地球浏览器 可以自动播放 -
PC端chrome浏览器中，如果打开浏览器授权，视频仍无法自动播放
方案：
为audio标签增加muted属性
效果：
视频可以自动播放了，但是声音处于静音状态，需要用户手动打开视频声音
- 监听视频播放结束的事件
支持video标签的浏览器，通过ended事件，移动端、PC端都是可以获取到的
//视频播放完毕
function playEnded(){
alert('视频播放完毕');
};
//播放结束
addHandler(oBanVideo,'ended',playEnded);
常用对象的属性与方法
- 查看当前浏览器是否支持音频
!!(document.createElement('video').canPlayType);
- 获取音频的总时长 (直接获取会为NaN，所以在onplay内修正)
oBanVideo.onplay = function(){
if(oBanVideo.duration){
console.log(oBanVideo.duration);
};
};
- 获取音频播放进度( 当前播放时间/总时长 )
oBanVideo.ontimeupdate = function(){
console.log(Math.floor(oBanVideo.currentTime/oBanVideo.duration*100)+'%');
};
- 播放结束时候触发
oBanVideo.onended = function() {
console.log('播放完毕');
};
未完待续...
网友评论