h5页面使用音频/视频播放的经验

// 错误写法
$("video").play()
$("audio").play()
// 正确写法播放视频
$("video")[0].play()
$("audio")[0].play()

真的是**too young too naive~**本以为这些音视频的使用就到这了，没想到后来还是遇到了坑。
第一个就是音频播放audio.play(),在ios中不生效，那没bgm，我的东家能乐意吗？我自己都不乐意是吧，那就找吧，在网上找到都不可以，恰好有个同学跟我说了一个方法，就是将audio.play()放在wx.ready()中，果然可以，但是现在就是有个问题就是，bgm可能要等你的wx.config()配置成功之后，才会悠扬又不失突然的传进你的耳朵，那怎么办呢？我也不知道呢，哪位大神，若见过其他的解决方案，我先在这给您作揖了，跪求告知啊！！！！
第二个：就是视频了，这个video的兼容性问题呀，真的是让人头大！我的解决方案是Android和ios各来一套煎饼果子，谁也不抢谁的。代码如下：

var u = navigator.userAgent, app = navigator.appVersion
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
	// alert("isAndroid");
	$(".videobox").append('<video id="mainvideo" class="andVideo" autoplay width="100%" x5-playsinline="" webkit-playsinline="" preload="auto"></video>')
	// 安卓的这个解决方案是有弊端的，就是 毕竟是放大的，那边边角角自然是hidden掉的，如果视频边角很重要，还是要另寻他法呀！
}
if (isIOS) {
	// alert("isIOS");
	$(".videobox").append('<video style="width:100%; height:100%; object-fit:fill" class="video iosVideo" autoplay="autoplay"  x5-playsinline playsinline webkit-playsinline x5-video-player-fullscreen="true"></video>')

}

video{  
	width: 100%;
    height: 100%; 
}  
video.andVideo::-webkit-media-controls-fullscreen-button {  
    display: none;  
}  
video.andVideo::-webkit-media-controls-play-button {  
    background: red;  
}  
video.andVideo::-webkit-media-controls-play-button {display: none}  
video.andVideo::-webkit-media-controls-timeline {display: none}  
video.andVideo::-webkit-media-controls-current-time-display{}  
video.andVideo::-webkit-media-controls-time-remaining-display {}  
video.andVideo::-webkit-media-controls-time-remaining-display {}  
video.andVideo::-webkit-media-controls-mute-button {}  
video.andVideo::-webkit-media-controls-toggle-closed-captions-button {}  
video.andVideo::-webkit-media-controls-volume-slider {}  
video.andVideo::-internal-media-controls-download-button {  
    display:none;  
}  
video.andVideo::-webkit-media-controls-enclosure {  
    overflow:hidden;  
}  
video.andVideo::-webkit-media-controls-panel {  
    width: calc(100% + 30px);  
}  
video.andVideo::-webkit-media-controls{
    display:none !important;
}
.video{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	display: block;
}

以上代码，在Android中的显示效果是，还在微信框框里面，又可以全屏播放；在ios里面就是全屏播放了，至此。
还有个疑问哦，这个video标签上的众多属性，哪位大神比较清楚，麻烦给我指条路啊~
新手代码粗鄙，还请多多指教~

h5页面使用音频/视频播放的经验

猜你喜欢