Html YouTube:如何呈现静音的嵌入视频
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/35044594/
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
YouTube: How to present embed video with sound muted
提问by user2924482
I'm trying to embed a video with the sound muted but I can not figure out how it make it work.
我正在尝试嵌入一个静音的视频,但我不知道它是如何工作的。
Currently I'm using this but doesn't work:
目前我正在使用它但不起作用:
<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?rel=0&autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
Any of you knows how can I make this work ?
你们中的任何人都知道我怎样才能使这项工作?
采纳答案by Devon Yarbrough
Updated
更新
Add &mute=1
to the end of your url.
添加&mute=1
到您的网址的末尾。
Your new code would be:
您的新代码将是:
<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?rel=0&autoplay=1&mute=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
Old Answer
旧答案
You're going to have to add Javascript to mute the audio. Add an id to your iframe:
Then retrieve the id with javascript:
var myVideo = iframe.getElementById('myVideo'); myVideo.mute();
您将不得不添加 Javascript 来静音音频。向您的 iframe 添加一个 id:然后使用 javascript 检索 id: var myVideo = iframe.getElementById('myVideo'); myVideo.mute();
Also see the mute section in the Youtube API reference https://developers.google.com/youtube/js_api_reference?csw=1
另请参阅 Youtube API 参考https://developers.google.com/youtube/js_api_reference?csw=1 中的静音部分
And the question:
How do I automatically play a Youtube video (IFrame API) muted?
回答by Adriana
For me works using &autoplay=1&mute=1
对我来说使用 &autoplay=1&mute=1
回答by paul
The accepted answer was not working for me, I followed this tutorialinstead with success.
接受的答案对我不起作用,我成功地遵循了本教程。
Basically:
基本上:
<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'YOUR_VIDEO_ID', // YouTube Video ID
width: 560, // Player width (in px)
height: 316, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 1, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 0 // Hide video controls when playing
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
// Written by @labnol
</script>
回答by Juan Manuel De Castro
This is easy. Just add mute=1to the src parameter of iframe.
Example:
这很简单。只需将mute=1添加到 iframe 的 src 参数即可。
例子:
<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?controls=0&mute=1&showinfo=0&rel=0&autoplay=1&loop=1&playlist=uNRGWVJ10gQ" frameborder="0" allowfullscreen></iframe>
回答by mtngunay
<iframe src="https://www.youtube.com/embed/7cjVj1ZyzyE?autoplay=1&loop=1&playlist=7cjVj1ZyzyE&mute=1" frameborder="0" allowfullscreen></iframe>
mute=1
静音=1
回答by hassanmen
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ObHKvS2qSp8?list=PLF8tTShmRC6uppiZ_v-Xj-E1EtR3QCTox&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ObHKvS2qSp8?list=PLF8tTShmRC6uppiZ_v-Xj-E1EtR3QCTox&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
回答by Limitless isa
Source: https://developers.google.com/youtube/iframe_api_reference
来源:https: //developers.google.com/youtube/iframe_api_reference
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '720',
width: '1280',
videoId: 'M7lc1UVf-VE',
playerVars :{'autoplay':1,'loop':1,'playlist':'M7lc1UVf-VE','vq':'hd720'},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.setVolume(0);
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000);
done = true;
}
event.target.setVolume(0);
}
</script>
回答by Ismet Doganci Webdesign19
I would like to thank the friend who posted the codes below in this area. I finally solved a problem that I had to deal with all day long.
我要感谢在此区域发布以下代码的朋友。我终于解决了一个我不得不处理一整天的问题。
<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'xCIBR8kpM6Q', // YouTube Video ID
width: 1350, // Player width (in px)
height: 500, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 0, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 0, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 0, // Hide video controls when playing
rel: 0
},
events: {
onReady: function(e) {
e.target.setVolume(5);
}
}
});
}
// Written by @labnol
</script>
回答by Dev
Just pass mute=1
.
只要通过mute=1
。
For example:
例如:
<iframe id="myVideo" src=https://www.youtube.com/embed/k0DN-BZrM4o?rel=0&autoplay=1;mute=1" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
回答by Owen Daniel
was also looking for a solution to this but I wasn't including via iframe, mine was linked to images/video.mp4 - found this https://www.w3schools.com/tags/att_video_muted.asp- and I simply added < video controls muted > (CSS/HTML 5 solution), but no JS required for me...
也在寻找解决方案,但我没有通过 iframe 包括在内,我的链接到了 images/video.mp4 - 找到了这个https://www.w3schools.com/tags/att_video_muted.asp- 我只是添加了 <视频控件静音 >(CSS/HTML 5 解决方案),但我不需要 JS...