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.
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();
I'm making a youtube web extension. How can I get a reference to YT.Player from the content script on a youtube video page (www.youtube.com/watch?v=videoId)?
In my main content script I have this (from https://developers.google.com/youtube/iframe_api_reference), but the function onYouTubeIframeAPIReady never fires:
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() {
console.log("onYouTubeIframeAPIReady");
////normally I would create the player like below, but I need the existing one
//player = new YT.Player('player', {
// modestbranding: 1,
// cc_load_policy: 1,
// wmode: "opaque",
// height: '390',
// width: '640',
// videoId: videoId,
// enablejsapi: 1,
// events: {
// 'onReady': onPlayerReady,
// 'onStateChange': onPlayerStateChange,
// 'onApiChange': onApiChange
// }
//});
}
Interestingly, I can get the player from the browser console:
var player = $("#movie_player");
But this call doesn't work from the content script (I get a different kind of object).
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.
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>