JavaScript

Question

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

如何触发视频自动播放？

任何帮助都非常感激。

Answer 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();
};

Answer 2

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

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

由于

Answer 3

这里是一个视频的示例，该视频将循环播放整个窗口并自动播放。它是通过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 才能使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;
}

JQuery自动播放视频

3 个答案:

JavaScript

CSS