javascript - 尽管在 HTML 的视频标签中使用 "autoplay"，但视频不会自动播放

Question

代码片段如下。我使用 impress.js 创建在线演示文稿。我想在最后一张幻灯片中插入一个视频，该视频在幻灯片出现时自动播放。但我无法实现这一点。谁能帮我解决这个问题吗？

<div class="step box" data-x="0" data-z="4000" data-rotate-y="0">

<video width="800" height="600" controls autoplay>
   <source src="electric_bulb_hd_stock_video.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

</div>

Answer 1

在 impress.js 中，DOM 阻止视频自动播放，但您可以使用 API，如下所示:

var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
    video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
    video.pause();
}, false);

HTML:

<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
    <video id="video" width="420" height="340" autoplay>
        <source src="video/test.webm" type="video/webm">
    </video>
</div>

通过上面的代码，当你进入这一步时，视频会自动播放，当你离开这一步时，视频会暂停。尝试一下:)