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>

使用上面的代码，当您进入此步骤时，视频将自动播放，并在您离开此步骤时暂停。试一试：）

Answer 2

尝试自动播放=＆＃34;自动播放＆＃34;

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

它应该有用。

尽管在HTML的视频标签中使用“自动播放”，但视频不会自动播放

2 个答案: