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.
Related
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');
}
});
});
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");
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);
});
I read the entire API and dozens of related help topics but I dont manage to get with the code to help me do what I want.
This is what I need:
The video is muted by default.
When user click on fullscreen button the video is played with full volume.
How do I code this?
I understand I can mute my video adding myPlayer.volume(0) like this:
<script>
var myPlayer = _V_("video_1");
myPlayer.volume(0);
</script>
But how do I detect whether the video is in fullscreen or not?
I found the fullscreenchange event on the API but dont manage to implement it successfully. Any help will do my day. Thank you!
Listen for the fullscreenchange event and check the isFullScreen property of the player.
var myPlayer = _V_("video_1");
myPlayer.volume(0);
var onFullScreen = function(){
if (this.isFullScreen) {
this.volume(1);
} else {
this.volume(0);
}
};
myPlayer.addEvent("fullscreenchange", onFullScreen);
https://github.com/zencoder/video-js/blob/master/docs/api.md
I'm using jquery ui tabs and video.js. I want to stop the video when I go to another tab and reset it when I come back to second tab.
As of VideoJS v4.6 you can do the following to reset the player:
player.pause().currentTime(0).trigger('loadstart');
That loadstart is the key which shows the poster image and rebinds the first play event.
u can use this for show poster or show bigplay button
$( '.backlink' ).click( function() {
// Player (this) is initialized and ready.
var myPlayer = _V_("video9");
myPlayer.currentTime(0); // 2 minutes into the video
myPlayer.pause();
myPlayer.posterImage.el.style.display = 'block';
myPlayer.bigPlayButton.show();
});
It's even easier.
let player = Video(el);
player.on('ended', () => {
player.initChildren();
});
First you need a reference to the video player.
http://videojs.com/docs/api/
var myPlayer = _V_("myVideoID");
Then you can use the API to start/stop/reset the video.
Stop:
myPlayer.pause();
Reset:
myPlayer.currentTime(0);
I'm not sure how the jquery tabs are set up, but you might be able to do:
$('.my-tab-class').click(function(){
myPlayer.pause().currentTime(0);
});
player.reset();
Life is simple.
Get the id of the video.just append _html5_api with the id since videojs appends these letters and then you could use pause and make currentTime equal to 0.
var videoStop = document.getElementById(videoId+"_html5_api");
videoStop.pause();
videoStop.currentTime= 0;
The solution I found was using the videojs api, invoke the reset function followed by initChildren for reconstruct the player structure, i'm using vesion 5.10.7.
videojs('sublime_video', {}, function () {
var videoPlayer = this;
videoPlayer.width(screen.width / 2);
videoPlayer.height(720);
videoPlayer.on("ended", function(){
videoPlayer.reset().initChildren();
});
});
I was looking for a way to reintialize the VideoJS plugin then I found this :-
var player = videojs('my-player');
player.on('ended', function() {
this.dispose();
});
Just dispose off the video and init again.
Source:- https://docs.videojs.com/tutorial-player-workflows.html#dispose