I posted the YouTube API and a video on my site a few days ago. I have set some PlayerVars. Everything worked then. Unfortunately, I noticed today that the player is not working properly anymore. All the PlayerVars are set in the iframe link, but they will not be executed (for example, 'showinfo': 0 will still display the video info). What can this be? Even if I remove all the changes I made since putting the video online, it will not work properly again.
HTML:
<div id="aboutVideoVideo"></div>
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('aboutVideoVideo', {
height: '100%',
width: '100%',
videoId: 'xxx_xx',
playerVars: {
'showinfo': 0,
'disablekb': 1,
'fs': 0,
'iv_load_policy': 3,
'modestbranding': 1,
'rel': 0
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
event.target.pauseVideo();
event.target.unMute();
}
iframe result:
<iframe id="aboutVideoVideo" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/xxx_xx?showinfo=0&disablekb=1&fs=0&iv_load_policy=3&modestbranding=1&rel=0&enablejsapi=1&origin=http%3A%2F%2Fxxx.xxx.xxx.xxx&widgetid=1"></iframe>
There has been a recent change in the Youtube embed API. Showinfo parameter has been depreciated. The video title, avatar, watch later and share icons will be displayed on loading, mouseover and when paused. So showinfo=0 doesn't work anymore.
There's also a change in the rel parameter.
Related
USING VIDEO.JS in Adobe Muse
Currently I have poster image configured to display at beginning of video,
when video has concluded I'd like the poster image to re-appear. Thanks for any help!
In the future the best way to do this will be through css. I just added an issue for it.
.video-js.vjs-ended .vjs-poster {
display: block;
}
For now there's two ways using javascript that should work.
var myPlayer = videojs(myId);
myPlayer.on('ended', function(){
this.posterImage.show();
});
// or
myPlayer.on('ended', function(){
this.trigger('loadstart');
});
You'll want to test both for your specific use case.
This worked for me! Video JS 6.6
var video_player;
$(document).ready(function()
{
// 'videoplayer' is the ID of our <video> tag
videojs("my-video", {}, function()
{
video_player = this;
video_player.on('ended', function()
{
video_player.posterImage.show();
$(this.posterImage.contentEl()).show();
$(this.bigPlayButton.contentEl()).show();
video_player.currentTime(0);
video_player.controlBar.hide();
video_player.bigPlayButton.show();
video_player.cancelFullScreen();
});
video_player.on('play', function()
{
video_player.posterImage.hide();
video_player.controlBar.show();
video_player.bigPlayButton.hide();
});
});
});
You should use the following as specified here
var player = videojs('#example_video_1', {}, function() {
this.on('ended', function() {
player.exitFullscreen();
player.hasStarted(false);
});
});
For video.js version 7.8.1 in 2020, following #chukwuma-nwaugha answer, I ended up with this:
var options = {};
var player = videojs('example_video_1', options, function onPlayerReady() {
this.on('ended', function() {
if (player.isFullscreen()) {
player.exitFullscreen();
}
player.hasStarted(false);
});
});
This worked for me:
/* Show poster when paused or stopped */
.video-js.vjs-default-skin.vjs-paused .vjs-poster {
display:none !important;
}
.video-js.vjs-default-skin.vjs-ended .vjs-poster {display:block !important;}
I am using VideoJS 5.12.6. None of the solutions above worked for me. I ended up using:
myPlayer.on('ended', function(){
$('body .vjs-poster').fadeIn();
});
I upvoted #heff's reply following the downvote as CSS is working in July 2018.
After the class:
.vjs-has-started .vjs-poster {
display: none;
}
Add the class:
vjs-ended .vjs-poster {
display: inline-block;
}
That will restore the poster to its default visible state. The vjs-ended class must come after the vjs-has-started class unless you want to increase the class specificity.
This is working for me on two separate projects. I love the way Video.js allows me to do so much in CSS without having to struggle with JavaScript.
You can use css to display poster image :
.video-js.vjs-ended .vjs-poster {
display: block;
}
Please note : you must remove poster attribute from html video tag :
<video id="my-video" style="position: unset"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}">
To be like that :
<video id="my-video" style="position: unset"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
data-setup="{}">
Is there any existing plugin to change the playback rate of a video using the video.js player? If not, how can I add the new plugin and the new control button for the same?
Thanks in advance.
From videojs v.4.6.0 on there is a JSON parameter for data-setup that you can pass to add the playback speed option to the videoplayer:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="268"
data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'>
Demo: http://jsbin.com/vikun/1/edit?html,output
Credits: https://stackoverflow.com/a/24767026/1066234
Note: You must use double quotes for the parameters within data-setup.
-
Helpful: If you need to change the speed after the videoplayer is ready (Jquery), use:
var video = videojs('videoplay', options);
video.ready(function() {
// faster speed initially
this.playbackRate(1.5);
});
I've the same issue. I just found that:
videojs('my-player', {
playbackRates: [0.5, 1, 1.5, 2]
});
see videojs docs
var player = videojs('videoplay');
player.ready(function() {
var _this = this
var playbackRate = $("#playbackRate").val();
var speed = parseFloat(playbackRate);
var volume = parseFloat($("#volume").val()/100.0); //[0,100]
setTimeout(function() {
_this.playbackRate(speed);
_this.volume(volume); //work for audio
},20);
});
player.src('/media/'+data.uuid+'.m3u8');
player.play();
above code works for me in production env, it's really hard to understand why should we delay for a moment before play audio stream.
PhantomJS is doing a great job of capturing web pages into image files for me. I am using a script based on rasterize.js.
However, for certain web elements of a fixed size, I need the resulting image to match the size of the web element.
e.g. I have a page like this:
<html>
<body>
<div id="wrapper" style="width:600px; height:400px;">
Content goes here...
</div>
</body>
</html>
In this example, I need it to produce an image sized at 600x400. Is thre a way to get the viewport size dynamically based on a web element in the page I am rasterizing.
I know this one is not a easy one... Ideas?
Thanks
Wow. Not that hard after all. Just set the viewport really big and use the cropRect function. What a great tool!
Mods to rasterize.js:
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
var height = page.evaluate(function(){
return document.getElementById('wrapper').offsetHeight;
});
var width = page.evaluate(function(){
return document.getElementById('wrapper').offsetWidth;
});
console.log('Crop to: '+width+"x"+height);
page.clipRect = { top: 0, left: 0, width: width, height: height };
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
}
});
I am trying to load a Youtube video in the home page (Chromeless) useing JavaScript API.
So far I managed to make it auto play, hd720 and fadeOut the video once it is finished.
But I can't find a way to remove controls, hide info and not to load related video at the end.
I know in iframe embed I can use below parameters
controls=0&showinfo=0&autoplay=1&rel=0
But I can't find way to use these parameters in YouTube Player API shown below.
Any suggestion?
<script src="http://www.youtube.com/player_api?enablejsapi=1&version=3"></script>
function onYouTubePlayerAPIReady() {
player = new YT.Player('video_chromeless', {
height: '800',
width: '450',
videoId: '',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event){
player.setPlaybackQuality('hd720');
event.target.playVideo();
}
function onPlayerStateChange(event) {
if(event.data === 0) {
$('#video_chromeless').fadeOut(600);
}
}
You can set 'playerVars' in the second parameter of "YT.Player":
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
This works fine for me:
player = new YT.Player('divId', {
videoId : videoSrc,
playerVars: {
'autoplay': 0,
'controls': 1,
'rel' : 0,
'fs' : 0,
}
});
YouTube updated their policy.
After September 25, 2018, "showinfo" parameter is deprecated and ignored from iframe.
https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018
According to the latest policy update of YouTube, we will no longer be able to hide the related videos using rel:0 flag.
you can see the rel flag got changed from 25th sept 2018
You can refer to this link for latest parameters of YouTubeAPI
To hide the controls
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'nYAsTBpyWto',
playerVars: {
controls: 0,
disablekb: 1
},
...
I'm embedding Youtube's experimental HTML5 iframe capabilities in a website through use of the javascript API:
YouTube Player API Reference for <ifram> Embeds
I'm aware of the z-index issues this brings about, and the fix that involves adding wmode=opaque (or wmode=transparent) to the iframe url:
Fixed. My Youtube iframe z-index is ignored and is above a fixed div
When just using the javascript API, how do you set wmode to opaque:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
// if I try adding wmode: opaque here, it breaks
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1
// if I try adding wmode: opaque as a playerVar here, it breaks
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Any ideas?
Hmmmm...
Well, it appears I was hasty in posting the question. It appears that the correct form for setting wmode within the API is:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1,
wmode: "opaque"
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Hopefully this helps someone else.
As far as I can tell it is the default to be opaque. I tested changing wmode to transparent, opaque and removed it. When it wasn't specified it was automatically set to opaque.
I'm not sure if this always was the case, but it definitely is now.
Also remember this only applies when using the Flash player. You can disable the HTML 5 player to test this which is the default with the 'Disable Youtube™ HTML5 Player' plugin. Then just inspect element and drill down till you find the EMBED tag.