看起来Safari也会阻止静音的视频(甚至没有声音)...
我找到了一个解决方法,但它并不完美,我也不为此感到自豪:
var ua = navigator.userAgent.toLowerCase();
var is_safari = (ua.indexOf("safari/") > -1 && ua.indexOf("chrome") < 0);
if(is_safari) {
var video = document.getElementById('#video-element-id');
setTimeout(function() {
video.play();
}, 50);
}
我已经尝试过不使用超时,但Safari会通过抛出Promise拒绝来拒绝此操作。我不知道为什么...
video
标签上添加controls="true"
和playsinline
属性即可。<video autoplay loop playsinline muted controls="true" src="~/background.mp4" type="video/mp4"></video>
注意: Safari不支持.webm格式,所以不要像我一样为此而苦恼比你想象的时间更长。
playsinline
完美地自动播放,但我正在尝试在用户点击某个按钮时切换静音(无法显示控件)。添加控件属性不允许像我这样切换音量。我的项目在桌面 Chrome / 桌面 FF 中运行 - 只是在桌面 Safari / 移动 Safari 中不起作用。 - Stephen Tetreault<style>
video {
display: none;
}
video.active {
display: block;
}
</style>
<button id="button">Show video</button>
<video id="video" muted playsinline></video>
<script>
var button = document.getElementById('button');
var video = document.getElementById('video');
button.addEventListener('click', function() {
video.className = 'active';
video.src = 'https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4';
video.play();
});
</script>
一个技巧是为每个视频重复使用同一个视频播放器。这样它只需要在第一次激活。每一次连续的播放都可以自动发生。
将src
属性放在<video>标签内,而不是使用<source>标签。
<video src="video_url.mp4" width="100%" poster="poster_url.png" autoplay loop muted playsinline></video>
使用 <source> 元素时,仅当页面加载时该元素在视图中才能正常工作(已在 Safari 11.0 上进行测试)
macOS 自动播放策略变更的链接。
const video = document.getElementById('#video-element-id');
video.oncanplaythrough = function() {
video.play();
}