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();
Related
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 one Youtube video which has 6 episodes and I have six buttons which onclick will skip to the start of that particular episode.
Here is the working fiddle for that.
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: '360',
width: '640',
videoId: 'L6cVcbkx8l8',
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
$('#episode1').click(function(evt){
console.log($(evt.currentTarget).val());
player.seekTo(50)
})
$('#episode2').click(function(evt){
console.log($(evt.currentTarget).val());
player.seekTo(100)
})
$('#episode3').click(function(evt){
console.log($(evt.currentTarget).val());
player.seekTo(150)
})
}
What I am actually trying to do is when someone is clicking on episode2, it should play between only that time code (say xx.yy to aa.bb). So, how do I mention the end time for each episode onclick.
<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>
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...
I have a YouTube playlist; everything is working fine with that. Here's the code:
<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 done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
width: '100%',
height: window.innerHeight-120+'px',
vq: 'hd720',
videoId: 'ZnToyoZus74',
playerVars: {
'autoplay': 1,
'loop': 1,
'showinfo': 0,
'controls': 0,
'playlist': [
'Glr36uh7Uls,Mx-cOLPqieg,C9uA-LFJS3Q,mKB4j3Lqa3w,tLmLXEShHT8'
]
}
});
}
</script>
However, I want to show customized information related to the currently playing video just below it (in a separated <div> but not overlaying the video). Once the video starts, a <div> containing the info from the first video will be displayed, once the video is over, this div will disappear. As soon as the second video start to play, then a different <div> containing the info for the second video will be displayed.
The <div> elements would contain an HTML file using the id of the video as the file name: ZnToyoZus74.html.
In this example I am using the following ids:
ZnToyoZus74
Glr36uh7Uls
Mx-cOLPqieg
C9uA-LFJS3Q
mKB4j3Lqa3w
tLmLXEShHT8
SOLVED!
This is the final code, just in case someone is looking for the same answer:
<div id="player" style="float:right;"></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 done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
width: '100%',
height: window.innerHeight-110+'px',
vq: 'hd720',
videoId: 'K7XbJ0XLXPY',
playerVars: { 'autoplay': 1, 'loop': 1, 'showinfo': 0, 'controls': 0, 'playlist':['UiUZOo1b6m0,w0Sm9tRJDDA']},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING) {
var url = evt.target.getVideoUrl();
var match = url.match(/[?&]v=([^&]+)/);
var videoId = match[1];
document.getElementById("myiframe").src='videosinfo/'+videoId+'.html';
}
}
</script>
<iframe name="myiframe" id="myiframe" width="100%" height="200px" allowtransparency=true frameborder="0" ></iframe>