尽管在 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

尝试自动播放="autoplay"

http://www.w3schools.com/tags/att_video_autoplay.asp

应该可以。

Answer 2

在 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>

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

尽管在 HTML 的视频标签中使用 "autoplay"，视频仍未自动播放

Video not autoplaying inspite of using "autoplay" in the video tag of HTML

html

javascript

video

impress.js