I'm experimenting with the Youtube player but I can't get it to mute by default.
function onPlayerReady() {
player.playVideo();
// Mute?!
player.mute();
player.setVolume(0);
}
How do I mute it from the start?
Fiddle
Update:
JavaScript Player API is deprecated.
Use iframe Embeds instead.
Turns out player.mute() works fine. It only needed the parameter enablejsapi=1. Initial test in the fiddle didn't work because the player initiation had an error. The following works.
HTML:
<iframe id="ytplayer" type="text/html" src="https://www.youtube-nocookie.com/embed/zJ7hUvU-d2Q?rel=0&enablejsapi=1&autoplay=1&controls=0&showinfo=0&loop=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>
JS:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.mute();
player.playVideo();
}
Fiddle
Credit to Gagandeep Singh and Anton King for pointing to enablejsapi=1
All above answers didn't work for me for some reason. It might be weird wordpress theme that I had to use or depreciated methods at Youtube API, I'm not sure. The only way of muting the player was to insert the code below into tag.
// Loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replaces the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'YOUR_VIDEO_ID',
playerVars: {
autoplay: 1,
controls: 1,
disablekb: 1,
hl: 'ru-ru',
loop: 1,
modestbranding: 1,
showinfo: 0,
autohide: 1,
color: 'white',
iv_load_policy: 3,
theme: 'light',
rel: 0
},
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event){
player.mute();
}
<div id="ytplayer"></div>
It's important to note that YouTube API mandates you run this within your markup directly within a <script> tag, or via a standard document.onLoad() native listener and not as a named function.
Otherwise it will not natively bind the onYouTubeIframeAPIReady() function to the DOM.
Try below code
var youtubeplayer = iframe.getElementById('ytplayer');
youtubeplayer .setVolume(0);
And below is your fiddle updated version,
NOTE: Must include enablejsapi=1 in video url
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
player.playVideo();
// Mute?!
//player.mute(); instead of this use below
event.target.mute();
//player.setVolume(0);
}
DEMO
Hope this helps...
Related
I am trying to put a button for unmute sound but having trouble executing it. My original plan was to do a toggle sound but I am looking to make the sound on work first
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '600',
width: '100%',
playerVars: { 'autoplay': 1, 'controls': 0,'autohide':1,'wmode':'opaque' },
videoId: 'W83b4HoPdFo',
events: {
'onReady': onPlayerReady}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
}
$('#mutevideo').on('click', function(){
player.unmute();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="player"></div>
Sound On
You can use,
player.unMute();
instead of
player.unmute();
After searching and finding many similar questions, I can't find the correct answer. So I'm working with the YouTube Iframe API, and I know that autoplay etc. won't work for mobiles. And I have created a element that displays on mobiles, so when the user click that button, it should play the video. But I only get this message: "Try restarting your device if playback does not start soon".
var playElement = document.createElement("div");
playElement.style.display = "none";
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
playElement.style.display = "block";
}
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(child, {
width: '100%',
height: '100%',
videoId: youtubeID,
playerVars: {
'iv_load_policy': 3,
'enablejsapi': 1,
'disablekb': 1,
'autoplay': 1,
'loop': 0,
'controls': 0,
'showinfo': 0,
'rel': 0,
'mode': 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
playElement.onclick = function() {
player.playVideo();;
};
Anyone that does have an actual working solution?
Remember player refers to a div with the ID 'player'. You can start with the example code on youtube api doc. It will autoplay when the video has loaded. You can add your playerVar options as well.
A note for mobile video autoplay. You can have it autoplay but it has to be muted. So you can try adding player.mute() when you it loads and setup a click handler to unmute it again if that is what you prefer.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
playerVars
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
I'm doing an application that uses youtube API. I select the time with the "seekto" function, but when the video jumps to that time, it appears like the following screenshot:
There's any option to remove all this things (bar, load circle, ...), and only see the frame of the video in that time??
Code:
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', {
playerVars: { 'autoplay': 0, 'controls': 2 },
height: '390',
width: '640',
videoId: '1WcvD6lu2Yg',
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
event.target.pauseVideo();
}
function salta(sec) {
player.seekTo(sec, true);
}
Thank you!
Edited:
Solved, the problem was the parameter "false" of the function seekTo. In "true" position, it loads the following second correctly.
I have a main YouTube video and some related videos at the bottom. YouTube video is loaded from a costum video name parameter in my url. If a video name exists YouTube iframe is loaded on page load but if a video name dosen't exists YT iframe isn't loaded until the user clicks a related video at the bottom. If the user clicks an related video the iframe is loaded and the same function onPlayerReady, and onPlayerStateChange should be used as the iframe was loaded from the begining. How can I insert the iframe in page and use the same function I use as it was loaded from the beginning. ?
player.js
var tag = document.createElement('script'),
firstScriptTag = document.getElementsByTagName('script')[0],
player;
tag.src = "https://www.youtube.com/player_api";
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: height,
width: width,
videoId: yt_id,
playerVars: {
wmode: "transparent",
controls: 0,
showinfo: 0,
rel: 0,
modestbranding: 1,
iv_load_policy: 3 //anottations
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
};
function onPlayerReady(event) {
//code here
//I want to use this code even when the player is loaded after the page is loaded (when the user clicks a related video at the bottom)
}
function onPlayerStateChange(event) {
//here too
}
insert_frame.js
var tag = document.createElement('script'),
firstScriptTag = document.getElementsByTagName('script')[0],
player;
tag.src = "https://www.youtube.com/player_api";
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
player = new YT.Player('ytplayer', {
height: height,
width: width,
videoId: yt_id,
playerVars: {
wmode: "transparent",
controls: 0,
showinfo: 0,
rel: 0,
modestbranding: 1,
iv_load_policy: 3 //anottations
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
How can I insert the iframe in page and use the same function I use as
it was loaded from the beginning. ?
If i understand correctly, you want to do that because some videos ID on the url may be false and the player iframe will not play the video.
Well you don't need insert a frame just because a video ID exist when use click on a related videoo the bottom, use onError parameter from YouTube Player API.
This event fires if an error occurs in the player. The API will pass
an event object to the event listener function. That object's data
property will specify an integer that identifies the type of error
that occurred. ...
If the videoID on the url doesn't exist an error will be send. Just hide the player for example and show it when the user click on a related video on the bottom.
With this solution you only need to load the player one and only one time without insert a frame into the code even if the id is wrong. A sample solution.
I made you a little example with a wrong videoID :
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="player"></div>
</body>
</html>
Javascript
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'l-gQLqv9f4',
events: {
'onError': onPlayerError,
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
$('#player').show();
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
}
}
function stopVideo() {
player.stopVideo();
}
function onPlayerError() {
console.log("error on the video id. Iframe is hiding");
$('#player').hide(); //or do what you want
}
Live demo: http://jsbin.com/mihikiqoma/1/edit?html,js,output
<iframe width="763" height="448" src="http://www.youtube.com/embed/videoseries?list=PLD7SqVUGDdDBw_xmMKTDF5MlBwys_KlUk&showinfo=0&rel=0&autoplay=0" frameborder="0" allowfullscreen style="margin-top:5px; margin-left:5px;"></iframe>
When I try it embedding just a video it works, but when I disable autoplay in "embed playlist code" it doesn't work.
In first video it doesn't play automatically but when video ends, it plays the next video, I want it to stop after each video.
any idea?
I find the solution of this situation, here are the codes that I was searching for and maybe it helps you too.
<div id=player></div>
<script type="text/javascript">
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: '448',
width: '763',
playerVars: {
'showinfo': 0,
'controls': 0,
listType: 'playlist',
list: 'PLD7SqVUGDdDBw_xmMKTDF5MlBwys_KlUk'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
// event.target.playVideo();
}
function play_this_video(){
player.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.stopVideo();
}
}
</script>