javascript - 在播放幻灯片时访问视频剪辑时间标记

Question

可以在播放过程中使用脚本访问时间标记，以便在图像旁边滚动图像以进行幻灯片显示吗？

Answer 1

尽管可以做到这一点，但您将不具有完全的跨浏览器兼容性（对于IE的某些旧版本和某些移动浏览器）。

通过使用HTML5标签，您可以在页面上播放视频并通过javascript访问其时间标记位置。

HTML：

<video id="vidElem" width="640" height="480">
  <source src="movie.webm" type="video/webm" />
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

JS：

var $video = document.getElementById('vidElem');
$video.addEventListener("canplay", _InitSync, false);

function _InitSync() {
  $video.addEventListener("timeupdate", _SyncSlides, false);
}
function _SyncSlides() {
  $curTime = $video.currentTime;
}

老实说，我还没有亲自测试过此代码，但是所有代码都应该有效。最后，您将获得一个带有视频当前时间标记的变量，该变量将在视频播放时更新。另外，我什至不确定'_InitSync（）'函数是否是必需的步骤，但是为了安全起见，我或多或少添加了该函数。基本上，这将等待视频元素准备就绪，然后一旦准备就绪，它将添加一个事件，该事件在视频每次更改其时间标记时触发。在此最终功能中，您只需添加一些代码即可根据$ curTime的值更改幻灯片。

让我知道这是否可以解决您的问题。