Hi there fellow SO users, I have started to develop a music archive site where users can share YouTube video's (Limited to music only).
I would like to incorporate a system which allows a list of these videos to be played automatically when the previous has finished.
The following code can be used to auto play a set array of videos, which will use one player rather than a list of them. In pseudo terms, the system I would like to create would be laid out in the following manner;
Player 1, Video 1
Player 2, Video 2
Player 3, Video 3
Player 4, Video 4
<div id="player1"></div>
<div id="player2"></div>
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player1', {
height: '350',
width: '425',
videoId: 'uO7kCUjUaUE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '350',
width: '425',
videoId: 'Bt9tTEZjYG8'
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player2.playVideo();
}
}
</script>
An existing topic: http://goo.gl/5neM6Z touches on this question (script source), however extended ideas from the OP are not answered. Including the idea that when one video is played, all others are paused.
My questions are, would there be a simple way of modifying this code to achieve this or will a new script have to be written? Does this system exist elsewhere? Could JWPlayer be the solution?
Discussion and advice on this topic will be greatly appreciated!
Here is another example that does more of what you want:
<!DOCTYPE html>
<html>
<head>
<title>4 Videos</title>
</head>
<body>
<script src="http://p.jwpcdn.com/6/11/jwplayer.js" type="text/javascript"></script>
<div id="player1"></div>
<div id="player2"></div>
<div id="player3"></div>
<div id="player4"></div>
<script type="text/javascript" language="javascript">
jwplayer("player1").setup({
file: "http://www.youtube.com/watch?v=xSE9Qk9wkig"
});
jwplayer("player2").setup({
file: "https://www.youtube.com/watch?v=NKPiIoLNMpA"
});
jwplayer("player3").setup({
file: "https://www.youtube.com/watch?v=hS5CfP8n_js"
});
jwplayer("player4").setup({
file: "https://www.youtube.com/watch?v=MZoO8QVMxkk"
});
jwplayer("player1").onComplete(function(){
jwplayer("player2").play();
});
jwplayer("player2").onComplete(function(){
jwplayer("player3").play();
});
jwplayer("player3").onComplete(function(){
jwplayer("player4").play();
});
jwplayer("player4").onComplete(function(){
jwplayer("player1").play();
});
jwplayer("player1").onPlay(function(){
jwplayer("player2").stop();
jwplayer("player3").stop();
jwplayer("player4").stop();
});
jwplayer("player2").onPlay(function(){
jwplayer("player1").stop();
jwplayer("player3").stop();
jwplayer("player4").stop();
});
jwplayer("player3").onPlay(function(){
jwplayer("player1").stop();
jwplayer("player2").stop();
jwplayer("player4").stop();
});
jwplayer("player4").onPlay(function(){
jwplayer("player1").stop();
jwplayer("player2").stop();
jwplayer("player3").stop();
});
</script>
</body>
</html>
or
jwplayer("player1").onComplete(function(){
jwplayer("player2").play();
jwplayer("player1").stop();
});
etc.
In the JW Player, the default behavior for a playlist is to play each item automatically.
Would this possibly do what you want?
<!DOCTYPE html>
<html>
<head>
<title>4 Videos</title>
</head>
<body>
<script src="http://p.jwpcdn.com/6/11/jwplayer.js" type="text/javascript"></script>
<div id="player1"></div>
<script type="text/javascript" language="javascript">
jwplayer("player1").setup({
playlist: [{
file: "http://www.youtube.com/watch?v=xSE9Qk9wkig"
},{
file: "https://www.youtube.com/watch?v=NKPiIoLNMpA"
},{
file: "https://www.youtube.com/watch?v=hS5CfP8n_js"
},{
file: "https://www.youtube.com/watch?v=MZoO8QVMxkk"
}
],
primary: "flash"
});
</script>
</body>
</html>
Related
I am designing an experiment making people watch a youtube video and I would like to keep them from controlling or stopping the video.
Also, it seems I can't use css since I am using a basic experiment software called Qualtrics.
I tried iframe "controls" and "disablekb" options but they didn't work. Also, "hideControls" doesn't work.
In the html (Qualtrics), I added
this simple html code and then I typed most codes in javascript:
var videoId = 'vpTHi7O66pI';
var hideControls = true;
// 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);
if (hideControls) {
hideControls = 0;
} else {
hideControls = 1;
}
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: videoId,
events: {
'onReady': onPlayerReady,
},
playerVars: {
autoplay: 1,
modestbranding: 1,
rel: 0,
disablekb: 1,
enablejsapi: 1,
showinfo: 0,
controls: 0
}
});
}
function onPlayerReady(event) {
player.contextmenu(function() {
return false;
});
player.setPlaybackRate(1.25);
player.loadVideoById({'videoId': videoId,
'suggestedQuality': 'large'});
event.target.playVideo();
}
window.setTimeout(function() {
onYouTubeIframeAPIReady();
}, 1000);
I expect mouse clicking doesn't lead to pausing the video but it pauses.
Try adding the pointer-events: none; CSS property in an inline style element on the player's encapsulating element.
For example, in your HTML you can use:
<style>#player {pointer-events: none}</style>
You could add a transparent overlay over the player itself, like a div, then stop the click event when it happens in there (could be with CSS, setting it's pointer events as pointer-events: none).
I have the most awesome answer if you're flexible about a JS solution - CSS can actually do this:
#container_id {
pointer-events: none;
}
Now the mouse won't interact with the controls at all (hover or click)
Edit: If JS is a requirement:
document.getElementById('container_id').addEventListener('click', function(event){
event.preventDefault()
}
Final edit: Sorry, did not read as carefully as I should :(
Looks like you are loading the player markup into var player - you should be able to add the prevent default onclick directly to that var as such:
player.onclick = function(event){ event.preventDefault() }
Good luck!
In response:
Each approach mentioned above was a different option, the middle one supposes access to the DOM, but I'm starting to sense you can't directly manipulate it based on what you've said - so I recommend the last implementation, I would try either of these:
Under:
player.setPlaybackRate(1.25);
player.loadVideoById({'videoId': videoId,
'suggestedQuality': 'large'});
Add:
player.onclick = function(event){ event.preventDefault() }
Or:
event.target.onclick = function(event){ event.preventDefault() }
I like the first one better for readability, but they might both work, without more info about the [ YT.Player ] (I assume a library you're using) I can't be sure the object bound to [ var player ] will allow it's onclick to be modified (some libraries include measures to prevent things like that) - so I include option 2 as a fallback - let me know if that doesn't work because there are other event binding options...
The CSS approach at the top is your last ditch effort, it would solve the problem on it's own, no need for any of the JS. It would be added between the
<style> and </style>
tags in the documents head, like so:
<head>
[ STUFF ]
<style>
#[THE_ID_OF_YOUR_CONTAINER] {
pointer-events: none;
}
</style>
</head>
or included in a stylesheet - likely named [something].css on your server as just:
iframe {
pointer-events: none;
}
I know this is an old thread, but recently ran into the same problem. I am trying to show a video as part of an experiment on memory. The plan is to record button presses, so it would be tricky with the timing if viewers can pause the video.
The video is hosted here: https://muse.ai/docs#embed-player,
which should in theory allow me to implement the solutions above. However, the movie is still pausable on a mouse-click.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
<style>
#container-name{
pointer-events: none;
}
</style>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
</script>
</head>
<body style="width: 840px; background-color: grey;">
<div id="container-name" ></div>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
const player = MusePlayer({
container: '#container-name',
video: 'zT4Vmcc',
width: 800,
autoplay: true,
style: 'no-controls',
});
event.target.onclick = function(event){ event.preventDefault() }
</script>
</body>
</html>
As you can see I tried to implement two of the solutions above. Any input would be apprechiated.
I was able to solve this with this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
<style>
</style>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
</script>
</head>
<body style="width: 840px; background-color: grey;">
<div id="container-name" ></div>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
const player = MusePlayer({
container: '#container-name',
video: 'zT4Vmcc',
style: 'no-controls',
logo: false,
search: false,
title: false,
autoplay: true,
shortcuts: false,
css: '*{pointer-events:none!important;}',
});
</script>
</body>
</html>
Which is also what juandxce suggested, thanks!
I'm currently doing measures on the quality of a video youtube depending on given network conditions. I wrote a custom Chrome extension to play videos and get buffering informations thanks to the youtube player api.
What I would need now is the content of the 'Stats for nerds' panel that appears when you right-click on the video (example).
I can display it thanks to UI automation. But, when I try to access the content of this panel with javascript, I get an error because of Cross-origin resource sharing (CORS).
I only want to read the Current/OptimalRes of the panel. Do you have any idea of a way to get it?
I've been searching for an answer to this question for long now. It has been mentioned here, but the answer to this post is not what I'm looking for as it only gives the general information about the video, not the resolution that is actually being played.
Apologies that this code is in 'AutoIT', but it should be easy to pipe to Javascript or any other similar language. This is a complete list of the 'Stats for Nerds' data:
#include <IE.au3>
;Attach to open YouTube player within browser
$oIE = _IEAttach ("https://www.youtube.com", "url",1)
;Get a reference to the movie player
$oPlayerRef = $oIE.document.getElementById("movie_player")
;Video ID / sCPN
msgbox(0,"",$oPlayerRef.getStatsForNerds(0).video_id_and_cpn)
;Viewport / Frames
msgbox(0,"",$oPlayerRef.getStatsForNerds(0).dims_and_frames)
;Current / Optimal Res
msgbox(0,"",$oPlayerRef.getStatsForNerds(0).resolution)
;Volume / Normalized
msgbox(0,"",$oPlayerRef.getStatsForNerds(0).volume)
;Codecs
msgbox(0,"",$oPlayerRef.getStatsForNerds(0).codecs)
;Connection Speed
msgbox(0,"",$oPlayerRef.getStatsForNerds(0).bandwidth_kbps)
;Network Activity
msgbox(0,"",$oPlayerRef.getStatsForNerds(0).network_activity_bytes)
;Buffer Health
msgbox(0,"",$oPlayerRef.getStatsForNerds(0).buffer_health_seconds)
;Mystery Text
msgbox(0,"",$oPlayerRef.getStatsForNerds(0).debug_info)
player.getPlaybackQuality();
Just call this function in the code given below
This code is from https://developers.google.com/youtube/iframe_api_reference
<!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',
playerVars: {
'playsinline': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 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>
My application have playlist for playing those videos I am using
<div class="thumbnail">
<div class="video-container">
<iframe width="100%" src="//www.youtube.com/embed/{{ media.src }}" frameborder="0 " allowfullscreen></iframe>
</div>
</div>
so now how to add playlist videos into this.
src="https://www.youtube.com/embed/videoseries?list=PL55713C70BA91BD6E" frameborder="0"
fiddle
in your case media.src="videoseries?list=PL55713C70BA91BD6E"
Update:
You can create your own playlist using IFrame Player API:
Below is an example, witch does't run on stack overflow, copy paste the code in a local html file and open it in your browser.
player = new YT.Player('player', {
width: 600,
height: 400,
videoId: 'f4Mc-NYPHaQ',//start videos id's
playerVars: {
color: 'white',
playlist: 'YR5ApYxkU-U,Tj75Arhq5ho'//next videos in playlist
}
});
index.html next
<!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', {
width: 600,
height: 400,
videoId: 'f4Mc-NYPHaQ',
playerVars: {
color: 'white',
playlist: 'YR5ApYxkU-U,Tj75Arhq5ho'
},
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
</script>
</body>
</html>
I am trying to create a zoom effect when mousing over a youtube player (iframe) .
Currently I am using the YouTube IFrame Player API to construct the player and triggering an onmouseover event listener to adjust the size of the player upon mousing over the player. And it doesn't seem to be working.
http://plnkr.co/edit/TOtWD9?p=preview
function zoom() {
player.setSize(width=200, height=150);
}
document.getElementById('player').addEventListener('onmouseover', zoom);
Any ideas on how to get this running or other approaches?
I clicked the plnkr link that you provided and picked up on a couple of issues that you have with your code, hence you are failing to achieve the anticipated / desired results:
I modified your code as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="playerHolder"></div><div id="player">stage1</div>
<script src="script.js"></script>
</body>
</html>
Feedback:
Unless you know what you are doing, in terms of what to do with js when certain things have happened ( "load order" ), put js last as you are not doing a check if the DOM element ( "player / playerHolder") has loaded before you bind it to any events. This helps prevent errors relating to undefined / null objects being bound to events.
css:
/* Styles go here */
body { width: 100%; height: 100%; }
#playerHolder{
border:2px solid red;
height:100%;
width:100%;
position:absolute;
}
Feedback:
The reason for what I did ( may not be the only way to do it ) is to set perspective "over" the YouTube embed. Note that, as far as I know, you cannot modify third party code from your server, in other words, unless there's a API function that allows you to add custom code, such as you binding a hover event onto the YouTube player, you can't just do it.
js:
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: '390',
width: '640',
videoId: 'SjOLOfyn95U',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function zoom() {
player.setSize(width=200, height=150);
}
document.getElementById('playerHolder').addEventListener('mouseover', zoom, false);
Feedback:
1) You targeted the Video embed itself, which I explained the issues relating to that on the css section above.
2) You used 'onmouseover', which I replaced with 'mouseover'
I hope this helps solve your problem.
It seems that YouTube has done some changes to the YouTube iframe API. Unfortunately I'm no longer able to embed a YT playlist with a defined starting (index) number.
Until today, the following simple code played a complete playlist in a queue, started with the 4th video of the list.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>
YT video player
</title>
<script src="https://www.youtube.com/iframe_api"></script>
<script type='text/javascript'>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'videoseries',
events: {
onReady: loadPlaylist
}
});
}
function loadPlaylist() {
player.loadPlaylist({
playlist: "PL6E443347ECEF351E",
listType: "playlist",
index: 4
});
}
</script>
</head>
<body>
<div id="player"></div>
</body>
</html>
I gave it a couple of tries to fix it, but I wasn't successfully, yet. Do you have a clue to resolve this, please?
There is a workaround setting the "Suggested Quality" anything except default.
It's filed and you can track it from https://code.google.com/p/gdata-issues/issues/detail?id=5411