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
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!
We're trying to offer the ability to switch between different video bitrates using the resolution switcher plugin (https://github.com/kmoskwiak/videojs-resolution-switcher) for a video.js player.
Here is a demo page with basic setup to run videojs player in flash mode: jsbin (click on 'edit in jsbin on your top right to see the actual code)
The plugin works correct in HTML5 (DASH and HLS) streaming but fails in Flash mode. The player will start playing with default bitrate value ('1080p' in this case) without any issues. The problem occurs when you actually switch the bitrate. If you select to change to a different bit-rate the player will stop playing. No browser console errors, player will not crash, just freezing. Seems like the player even doesn't sent the actual http request to get the new video source. Sometimes plugin even can actually switch the source, but it's happened just few times and randomly. In other words the behavior is way unstable and not acceptable.
Plugin provides resolutionchange event which should be fired when resolution is changed, but it's not. Only UI changes are visible.
I'm really appreciate on any help or ideas on how this behavior can be fixed!
Also including it here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="http://vjs.zencdn.net/5.16.0/video-js.css" rel="stylesheet">
<style>
.video-js { background-color: black; }
video { width: 100%; height: 100% }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.16.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.1.0/videojs-contrib-hls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.4.0/dash.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.7.1/videojs-dash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-resolution-switcher/0.4.2/videojs-resolution-switcher.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" width="450" height="250"></video>
<script>
videojs('player', {
preload: 'auto',
autoplay: true,
techOrder: ["flash"],
controls: true,
plugins: {
videoJsResolutionSwitcher: {
default: 1080,
dynamicLabel: true
}
}
}, function(){
handleReady(this);
});
var sources=[
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/1080p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"HQ",type:"rtmp/mp4",res:1080},
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/720p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"Medium",type:"rtmp/mp4",res:720},
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/480p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"Low",type:"rtmp/mp4",res:480}
];
function handleReady(player) {
window.player = player;
player.updateSrc(sources);
}
</script>
</body>
</html>
var player = videojs('video', {
controls: true,
muted: true,
width: 800,
plugins: {
videoJsResolutionSwitcher: {
ui: true,
default: '< default_res >', // Default resolution [{Number}, 'low', 'high'],
dynamicLabel: false
}
}
},
function() {
player.updateSrc([ < sourcetags > ]);
player.on('resolutionchange', function(){
player.play();
console.info('Source changed to %s', player.src());
})
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.
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>