3

嗨，我有一些非常基本的 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();

如何触发视频自动播放？

非常感谢任何帮助。

4

3 回答 3

12

您可以使用：

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

或者：

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

或者：

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

什么适合你。使用$('#video_player').play();您正在引用playjQuery 中不存在的方法，您应该引用$("#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 中，如果要使用属性
，还需要添加属性。参考：https ://developers.google.com/web/updates/2017/09/autoplay-policy-changesmutedautoplay

于 2013-02-28T00:20:55.240 回答
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()。将它们设置为属性将不起作用！（并且会产生很大的误导，因为你会认为你设置了它们，而实际上你并没有。）
  • mutedChrome 中需要它autoplay才能工作。
  • 创建海报的一种简单方法：用 VLC 打开视频，拍一张Snapshot，将生成的 PNG 转换为 JPG。
  • 确保视频已正确转换。并非所有 MP4 文件都可以在浏览器中使用。这被证明是有用的：使用 FFmpeg (for 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;
}
于 2019-12-17T16:03:06.740 回答
1

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

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

谢谢

于 2017-12-28T09:20:18.933 回答