JQuery 自动播放视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15124438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery autoplay video
提问by Darwin Tech
Hi I have some very basic html for a video:
嗨，我有一些非常基本的视频 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>
in my js:
在我的 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?????
};
This works great for injecting the correct path into the srcattribute, and I have verified the path is correct and accessible. However, I cannot get the video to autoplay on load.
这对于将正确的路径注入src属性非常有用，并且我已经验证了路径是正确的且可访问的。但是，我无法让视频在加载时自动播放。
I have tried:
我试过了：
document.getElementById("video_player").play();
$('#video_player').trigger('play');
$('#video_player').play();
How can I trigger the video to autoplay?
如何触发视频自动播放？
Any help much appreciated.
非常感谢任何帮助。
回答by sobol6803
You can use:
您可以使用：
$("#video_player")[0].play();
Or:
或者：
$("#video_player")[0].autoplay = true;
Or:
或者：
document.getElementById("video_player").setAttribute('autoplay', true);
Whatever suits you. Using $('#video_player').play();you are referencing to non-existing method playin jQuery and you should reference to the object found by $("#video_player").
什么都适合你。使用$('#video_player').play();您正在引用playjQuery 中不存在的方法，您应该引用由$("#video_player").
To change the src of the video in JS, you just simply need something like that:
要在 JS 中更改视频的 src，您只需要这样的东西：
function playFile() {
var video = $("#video_player");
video[0].src = "http://www.yoursrc.com/video_new.mp4";
video[0].load();
video[0].play();
};
NOTE:注意：
在 Chrome 中，
mutedmuted如果要使用该autoplayautoplay属性，还需要添加属性。参考：https://developers.google.com/web/updates/2017/09/autoplay-policy-changeshttps://developers.google.com/web/updates/2017/09/autoplay-policy-changes回答by Fabien Snauwaert
Here is an example of a video that will cover the whole window and autoplay, on a loop. It's created on demand via JavaScript.
这是一个视频示例，它将在循环中覆盖整个窗口并自动播放。它是通过 JavaScript 按需创建的。
I needed this for a video that should only load and play when requested, i.e. not on every load of the page. (Hiding the element with display: none;won't do, because the video then still loads even if not displayed.)
我需要这个视频，它应该只在请求时加载和播放，即不是在每次加载页面时。（隐藏元素display: none;不起作用，因为即使不显示视频仍然会加载。）
JavaScript
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'));
Note that:
注意：
muted,autoplay,loopmust go inside ofprop(). Setting them as attributes will notwork! (And will be quite misleading, because you'd think you set them when in fact you really haven't.)mutedis needed in Chrome forautoplayto work.- A simple way to create the poster: open the video with VLC, take a
Snapshot, converted the resulting PNG to JPG. - Make sure the video is properly converted. Not all MP4 files will work in the browser. This proved useful: Video conversion with FFmpeg (for the Web).
muted,autoplay,loop必须进去prop()。将它们设置为属性将无法工作！（并且会产生很大的误导，因为您认为您设置了它们，而实际上您并没有。）muted需要在 Chrome 中autoplay工作。- 创建海报的简单方法：用 VLC 打开视频，取一个
Snapshot，将生成的 PNG 转换为 JPG。 - 确保视频已正确转换。并非所有 MP4 文件都可以在浏览器中使用。事实证明这很有用：使用 FFmpeg 进行视频转换（用于 Web）。
The hard-to-read-alternative mentioned above:
上面提到的难以阅读的替代方案：
$('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
CSS
.myclass {
position: fixed;
z-index: -1;
height: 100vh;
top: 0;
left: 0;
}
回答by subindas pm
Please check this simple step, This works well for me
请检查这个简单的步骤，这对我很有效
$('video').trigger('play');
Thanks
谢谢
