Question

可以使用脚本来在播放期间访问时间标记，以便可以在其旁边滚动图像以进行幻灯片放映吗？

Answer 1

假设您的意思是原生HTML5视频播放器，则使用currentTime属性读取或设置当前时间 - 在网络上阅读here和其他几个参考网站。

Answer 2

虽然可以这样做，但您将无法获得完全的跨浏览器兼容性（对于某些旧版本的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的值更改幻灯片。

如果这样可以解决您的问题，请告诉我。

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

2 个答案: