加载后播放 HTML5 视频

Question

我正在寻找一种在完全加载后播放 html5 视频的方法。虽然视频仍在加载 - 显示视频占位符图像。 在我使用 setTimeout 函数之前，但它不是实现此目的的方法。

setTimeout(function() {
    $('banner__video--fallback').fadeOut();
    $('.banner__video')[0].play();
}, 800);

那么在加载后播放视频的方法是什么？

编辑： 使用解决方案，“canplaythrough”视频在完全加载之前仍然无法播放。

$('.banner__video')[0].addEventListener("canplaythrough", function () {
  $('banner__video--fallback').fadeOut();
  $('.banner__video')[0].play();
}, false);

Answer 1

为什么不直接使用 HTML5 视频属性？不需要 javascript。

<video autoplay poster="/placeholder.jpg">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

autoplay 会在视频加载后立即播放视频，poster 会在视频加载时分配一张图片站在视频中。

您应该在此处阅读更多内容：http://www.w3schools.com/html/html5_video.asp

Answer 2

我认为这是在加载视频后播放视频的更好选择：

var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
    alert("Can play through video without stopping");
};

Answer 3

您可以像这样使用 ajax 调用下载视频： Another: Force Chrome to fully buffer mp4 video 或仅使用 canplaythrough 属性。