【问题标题】：JQuery autoplay videojQuery自动播放视频
【发布时间】：2013-02-13 23:44:02
【问题描述】：

您好，我有一些非常基本的 html 视频：

<div class="video_holder">
      <video id="video_player" controls="controls" poster=""> 
        <source id="video_mp4" src="" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      </video>
</div>

在我的 js 中：

 function playFile(e) {
      ...
      e.preventDefault()
      var selected = $(this);
      var path = selected.attr('href');
      $("#video_mp4").attr('src', path);
      // how do I get this thing to auto-play?????
  };

这非常适合将正确的路径注入src 属性，并且我已验证该路径是正确且可访问的。但是，我无法让视频在加载时自动播放。

我试过了：

document.getElementById("video_player").play();

$('#video_player').trigger('play');

$('#video_player').play();

如何触发视频自动播放？

非常感谢任何帮助。

【问题讨论】：

标签： jquery html5-video

【解决方案1】：

你可以使用：

$("#video_player")[0].play();

或者：

$("#video_player")[0].autoplay = true;

或者：

document.getElementById("video_player").setAttribute('autoplay', true);

任何适合你的。使用$('#video_player').play();，你引用了jQuery中不存在的方法play，你应该引用$("#video_player")找到的对象。

要在JS中改变视频的src，你只需要这样的东西：

function playFile() {
    var video = $("#video_player");
    video[0].src = "http://www.yoursrc.com/video_new.mp4";
    video[0].load();
    video[0].play();
};

注意：
在 Chrome 中，如果要使用 autoplay 属性，还需要添加 muted 属性。参考：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

【讨论】：

实际上这些方法都不适合我。我的html有问题吗？如果我对其进行硬编码，该链接肯定有效。
视频好像没有更新，因为如果我硬编码链接，我可以用jQuery触发播放，但它总是播放硬编码的视频，即使src元素更新了。
@DarwinTech，我已经编辑了我的答案。如果您在使用 JS 时遇到问题，调试代码的最佳方法是在代码中使用 console.log()。这将在浏览器的控制台中输出您想要的所有内容。例如，在我上面的代码中，您可以像这样调试video 变量：console.log(video);，您将在控制台中看到整个对象及其方法和参数。这真是一个很棒的工具。如果您对该工具/代码有任何问题，请随时提出。
原来$("#video_player")[0].load(); 在调用play() 之前是必要的，至少在我的情况下是这样。 @sobol6803 - 如果您想将其添加到您的答案中，我会接受它，因为其余的都是正确的。
这对我有用，但是，我必须在.play() 之前调用.load()，就像@DarwinTech 说的那样。

【解决方案2】：

这是一个视频的示例，该视频将覆盖整个窗口并循环自动播放。它是通过 JavaScript 按需创建的。

我需要一个视频，该视频应该只在请求时加载和播放，即不是在页面的每次加载时。（用display: none; 隐藏元素是不行的，因为即使没有显示，视频仍然会加载。）

JavaScript

/**
 * Create the video.
 *
 * An alternative might have been to use an HTML template tag inside the Twig template,
 * to then create an element and append it. But this worked only in Chrome:
 * - in Firefox, `autoplay loop muted` (inside the <template>) get converted to
 *   `autoplay="" loop="" muted=""` (in the Inspector) and there's no playback.
 * - in Safari, nothing happens.
 *
 * Another alternative (that worked this one) is to just append the whole HTML as a
 * single string, but it's harder to read.
 */
var video = $('<video />', {
    id: 'video',
    class: 'myclass',
    poster: 'https://path/to/my/poster.jpg'
}).prop({
    muted: true,
    autoplay: true,
    loop: true,
});
var src1 = $('<source />', {
    type: 'video/webm', // for Firefox, Chrome; slightly smaller file size
    src: 'https://path/to/my/video.webm'
}).appendTo(video);
var src2 = $('<source />', {
    type: 'video/mp4', // for Safari, Firefox, Chrome
    src: 'https://path/to/my/video.mp4'
}).appendTo(video);
video.appendTo($('body'));

注意：

muted、autoplay、loop 必须进入prop() 的内部。将它们设置为属性将不起作用！（而且会产生很大的误导性，因为你会认为你设置了它们，而实际上你并没有。）
muted 在 Chrome 中需要autoplay 才能工作。
创建海报的简单方法：使用 VLC 打开视频，获取Snapshot，将生成的 PNG 转换为 JPG。
确保视频已正确转换。并非所有 MP4 文件都可以在浏览器中使用。事实证明这很有用：Video conversion with FFmpeg (for the Web)。

上面提到的难以阅读的替代方案：

$('body').append('<video class="c-congrats  c-congrats--outofnew" autoplay loop muted> <source src="https://path/to/my/video.webm" type="video/webm" /> <source src="https://path/to/my/video.mp4" type="video/mp4" /> Your browser does not support the video tag. </video>')

CSS

.myclass {
    position: fixed;
    z-index: -1;
    height: 100vh;
    top: 0;
    left: 0;
}

【讨论】：

【解决方案3】：

请检查这个简单的步骤，这对我很有效

$('video').trigger('play');

谢谢

【讨论】：

也为我工作。谢谢。