如下的例子,在安卓手机上可以正常的播放、暂停、开启声音,关闭声音,但是在苹果手机上,关闭声音无效,通过setAttribute
也没有效果,请大家帮忙看看,在线急等
例子代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video</title>
<style>
html{
font-size: 100px;
}
button{
line-height: 40px;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<button id="start">开始播放</button>
<button id="sound">静音</button>
<video id="myvideo" src="http://media.w3.org/2010/05/sintel/trailer.mp4" width="100%" height="90%" type="video/mp4" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="landscape" webkit-playsinline='true' style="object-fit: fill;"></video>
</div>
<script>
var video = document.getElementById('myvideo');
document.getElementById('start').addEventListener('click',function(){
if(video.paused){
video.play();
this.innerText = "暂停";
}else{
video.pause();
this.innerText = "开始播放";
}
})
var flag = false;
document.getElementById('sound').addEventListener('click',function(){
flag = !flag;
video.muted = flag;
if(flag){
this.innerText = "开启声音";
}else{
this.innerText = "静音";
}
})
</script>
</body>
</html>
iOS safari不支持muted属性,可查阅MDN