Html 如何在 iframe 中禁用本地视频的自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31956221/
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
How to disable auto-play for local video in iframe
提问by Taleb
How to disable auto-play for video when src is from my local pc?
当 src 来自我的本地电脑时，如何禁用视频的自动播放？
<iframe width="465" height="315" src="videos/example.mp4"></iframe>
I have tried the following, but it doesn't work:
我尝试了以下方法，但不起作用：
src="videos/example.mp4?autoplay=0"src="videos/example.mp4?autoplay=false"src="videos/example.mp4?autostart=0"src="videos/example.mp4?autostart=false"
src="videos/example.mp4?autoplay=0"src="videos/example.mp4?autoplay=false"src="videos/example.mp4?autostart=0"src="videos/example.mp4?autostart=false"
回答by Abhishek
If you are using HTML5, using the Videotag is suitable for this purpose.
如果您使用 HTML5，则使用Video标签适合此目的。
You can use the Video Tag this way for no autoplay:
您可以通过这种方式使用视频标签不自动播放：
<video width="320" height="240" controls>
<source src="videos/example.mp4" type="video/mp4">
</video>
To enable auto-play,
要启用自动播放，
<video width="320" height="240" controls autoplay>
<source src="videos/example.mp4" type="video/mp4">
</video>
回答by Guru
Try This Code for disable auto play video.
试试这个代码来禁用自动播放视频。
Its Working . Please Vote if your are done with this
它的工作。如果您完成此操作，请投票
<div class="embed-responsive embed-responsive-16by9">
<video controls="true" class="embed-responsive-item">
<source src="example.mp4" type="video/mp4" />
</video>
</div>
回答by Mindsers
What do you think about videotag ? If you don't have to use iframetag you can use videotag instead.
你怎么看video标签？如果您不必使用iframe标签，则可以使用video标签代替。
<video width="500" height="345" src="hey.mp4" />
You should not use autoplayattribute in your videotag to disable autoplay.
您不应autoplay在video标签中使用属性来禁用自动播放。
回答by How2Zumba
<iframe width="420" height="315"
src="https://www.youtube.com/embed/aNOgO7aNslo?rel=0">
</iframe>
You're supposed to put the characters ?rel=0after the YouTube video unique link and before the quotations. it worked for me
您应该将字符放在?rel=0YouTube 视频唯一链接之后和引号之前。它对我有用
回答by Yuanchun
You can set the source of the player as blank string on loading the page, in this way you don't have to switch to videotag.
您可以在加载页面时将播放器的来源设置为空字符串，这样您就不必切换到video标签。
var player = document.getElementById("video-player");
player.src = "";
When you want to play a video, just change its srcattribute, for example:
当你想播放一个视频时，只需改变它的src属性，例如：
function play(source){
player.src = source;
}
回答by immayankmodi
I've tried all the possible solutions but nothing worked for local video bindings. I believe best solution would be to fix using jQuery if you still wants to use iframes.
我已经尝试了所有可能的解决方案，但对于本地视频绑定没有任何效果。如果您仍然想使用 iframe，我相信最好的解决方案是使用 jQuery 进行修复。
$(document).ready(function () {
var ownVideos = $("iframe");
$.each(ownVideos, function (i, video) {
var frameContent = $(video).contents().find('body').html();
if (frameContent) {
$(video).contents().find('body').html(frameContent.replace("autoplay", ""));
}
});
});
Note:It'll find all the iframes on document ready and loop through each iframe contents and replace/remove autoplayattribute. This solution can be use anywhere in your project. If you would like to do for specific element then use the code under $.eachfunction and replace $(video)with your iframe element id like $("#myIFrameId").
注意：它会找到文档上的所有 iframe 并循环遍历每个 iframe 内容和替换/删除autoplay属性。此解决方案可以在您的项目中的任何地方使用。如果您想针对特定元素执行此操作，请使用$.eachfunction下的代码并替换$(video)为您的 iframe 元素 ID，例如$("#myIFrameId")。
回答by Juan Pablo Venditti
Replace the iframe for this:
为此替换 iframe：
<video class="video-fluid z-depth-1" loop controls muted>
<source src="videos/example.mp4" type="video/mp4" />
</video>
回答by Monique Schreiner
Just replace
只需更换
<iframe width="465" height="315" src="videos/example.mp4"></iframe>
by
经过
<video src="videos/example.mp4" controls></video>
Here is an example using bootstrap 4:
这是使用引导程序 4 的示例：
<div class="embed-responsive embed-responsive-4by3">
<video src="videos/example.mp4" controls></video>
</div>
