Do you know or have ideas how I can get source video resolution or aspect in videojs?
I have looked vjs.Player, but it just return windows size, not original video size.
Thanks,
Andrey
<video id="player" onplaying="onplaying()"></video>
<script>
var player = videojs('player', {
autoplay: true,
controls: false,
poster: ''
});
player.src("http://your.video.src");
function onplaying(){
console.log(player.videoHeight());
console.log(player.videoWidth());
}
</script>
So for
<video id="video0"
we have
var vid2 = document.getElementById('video0_flash_api');
w = vid2.vjs_getProperty("videoWidth");
h = vid2.vjs_getProperty("videoHeight");
Related
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.
I have a homepage displaying many mp4 <video> with different durations (less than 10 seconds each). They play independently on mouseover.
However, I want that some with a class like "demidemi" play half their total duration on each hover, as:
First mouseover of "demidemi" video plays from currentTime = 0 to duration/2 and pause
Second mouseover of "demidemi" video plays until the end
I have created a JSfiddle with the current HTML:
<video>
<source src="http://tacco.fr/divers/forward.mp4" type="video/mp4">
</video>
<video class="demidemi">
<source src="http://tacco.fr/divers/forward-backward.mp4" type="video/mp4">
</video>
…and JS:
var vid = $("video");
var vidiv = $("video.demidemi");
vid.mouseover(function() {
$(this).get(0).play();
});
vidiv.addEventListener("timeupdate", function() {
if ($(this).get(0).currentTime = ($(this).get(0).duration)/2) {
$(this).get(0).pause
}
else {
$(this).get(0).play();
}
}, false);
If someone could help me it would be really really appreciated. Thank you :-)
I found another solution to get the behaviour.
It might be less efficient in terms of performance than the one suggested by Ken, but it's working without changing the HTML or CSS markup.
I played with addClass, hasClass, and removeClass for that… but not sure if it's the best approach. So again, I'm open if someone know how to improve that :-)
Here is the updated JSfiddle
var vid = $("video"),
vidiv = $("video.demidemi");
vid.mouseover(function() {
$(this).get(0).play();
});
vidiv.mouseover(function() {
if ( this.currentTime <= this.duration*0.5 ) {
$(this).addClass('firstHalf');
}
$(this).on("timeupdate", function() {
if ($(this).hasClass('firstHalf') && (this.currentTime) >= (this.duration)*0.5 ){
$(this).get(0).pause();
$(this).removeClass('firstHalf');
}
});
});
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.
I have tried:
videojs("cats").ready(function(){
myPlayer.volume(0);
});
... but it did not work. I searched here and through the documents and am not finding the answer, or using the code correctly.
might be a bit late.
In your javascript, try:
myPlayer.muted(true);
Okay so the answer is easy:
just add: muted to the tag, such as:
<video id="cats" class="video-js vjs-fullscreen vjs-default-skin" muted autoplay controls loop preload="auto" width="600" height="400"
data-setup="{}">
<source src="x.webm" type='video/webm' />
</video>
When you init the player, you can set muted to true.
videojs("cats", { muted: true });
There'r few ways to set Mute on VideoJS.
{muted: true} OR this.volume(0) OR "muted" attribute in a video tag
Sample below:
var setupOpt = {
'techOrder': ["html5", "flash"],
'muted' : true, //OR YOU CAN ADD MUTE Attr.
'controls' : true,
'autoplay' : true,
'preload' : 'auto',
'height' : '500px',
'width' : '500px',
'poster' : "Url for poster"
};
videojs("my-video", setupOpt , function() {
var player = this;
player.src({ src: "URL!", type: 'TYPE!'});
player.volume(0); //Volume range 0.0 to 1 (0.0, 0.1, 0.2 ...)
// });
});
Your code myPlayer.volume(0.5); will not mute the video. You need to change that to:
myPlayer.volume(0);
From the documentation: "0 is off (muted), 1.0 is all the way up, 0.5 is half way."
Might be a bit late, but I think the solution is quite easy. Change your code from myPlayer to this. Should look like this:
videojs("cats").ready(function(){
this.volume(0);
});
This is untested, but it should work, I think. Even if you had a variable myPlayer that takes the player, it will contain it only after having set the .ready() callback, so in the callback, the variable won't be holding your player.
Maybe my explanation is wrong, but you could try this... ;-)
EDIT: Just saw some of the other answers, that should also work.
The problem in the code is that the myPlayer variable is not defined
videojs("cats", {}, function(){
var myPlayer = this;
myPlayer.volume(0);
});