Is there any configuration that I can pass so that the Shaka Player pauses itself at certain duration/point in the video? , for e.g. I want to pause player on 300 seconds.
One way is to change playRangeEnd configuration, but that messes the user experience
Is there any alternative?
As suggested by #TheModMaker on https://github.com/google/shaka-player/issues/2510 ,
This is related to the native video element, not the Shaka.
timeupdate event can be used to achieve this, like,
video.addEventListener('timeupdate', () => {
if (video.currentTime >= 300)
video.pause();
});
timeupdate event is fired when the video's currentTime is updated.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event
Related
Hi this question is for anyone who may be able to show me how to resolve this user issue. I have a script that plays a video with the user able pause and resume on touch. This was easy enough to do and works fine. At a certain point the script pauses the video for the user for a set time so the user has time to read the information on the screen. The intent is for them to be able to to resume playing the video after reading the information. If the user waits long enough, the touch to resume works fine. But, because some users read faster than others it is obvious I need to detect the touch even when the video was paused by the script - this is the part I need help with. Currently, if the video is paused by the script and the user touches the screen before the set time for the pause expires, the play button will show but pressing it to play will not resume the script until that time expires. I presume I need a listener inside the function the script used to pause the video. I am not quite sure the best way to handle that. Here is a snippet of my approach so far:
var myVideo = document.getElementById("myVideo");
function playPause() {
var el = document.getElementById("playButton");
if (myVideo.paused) {
myVideo.play();
el.className ="";
} else {
myVideo.pause();
el.className = "playButton";
}
}
myVideo.addEventListener("click", playPause, false);
var pause42 = function(){
if(this.currentTime >= 42 && !myVideo.paused) {
this.pause();
// remove the event listener after you paused the playback
this.removeEventListener("timeupdate",pause42);
}
};
myVideo.addEventListener("timeupdate", pause42);
Any help is appreciated!
FYI problem solved. Posting the answer here if it helps others.
var pause42 = function(){
if(this.currentTime >= 15 && !myVideo.paused) {
this.currentTime = 42;
this.pause();
// remove the event listener after you paused the playback
this.removeEventListener("timeupdate",pause42);
}
};
myVideo.addEventListener("timeupdate", pause42);
I am using BXSlider to display various videos. I am trying to fade out an overlay when the first video starts playing.
I have tried hooking into onSliderLoad but that trigger before the video has started playing.
Anyone know if there is a way I can detect when the video has actually started playing?
Listen for the playing event.
Demo
var vid = document.getElementById('vid');
vid.addEventListener('playing', function(e) {
console.log('Video has started');
});
<video id='vid' src='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' width='320' height='180' controls autoplay></video>
I am showing a div width Text over the poster image while the video is loading and when the video is paused.
How can I detect the moment the video is fully loaded and autoplay starts? Because then, the div should be hidden.
It you have defined autoplay then detect using the play event:
video.onplay = function() { /* remove overlay here */ };
alternatively use canplay or canplaythrough when you want to manually trigger play.
I'm using video.js (4.1.0), and would like to return to the ready-to-start state at the end of the video. I don't see how to do this.
If I do
myPlayer.on("ended", function(){
});
and load the poster frame in there, using myPlayer.posterImage.show(); it covers the entire video object, even if a user starts playing the video again.
If, at the end, I do this:
this.pause();
this.currentTime(0);
it has the video paused at the beginning, rather than the ready state with poster frame.
Any thoughts on how I can accomplish this?
The poster image should disappear again when playback restarts - do you have a link where it does not? It does in this fiddle, where the posterImage and bigPlayButton are shown and currentTime is set to 0.
var vid = videojs("myVideo");
vid.on("ended", function(){
vid.posterImage.show();
vid.bigPlayButton.show();
vid.currentTime(0);
})
please i need your help folks!
I'm using Anythingslider to slide between HTML5 video and other content, but when I add autoplay attribute in video tag, Anythingslider plays just audio.
Are you sure the video is not hidden behind another element? Play with the z-index as the video should be visible. I've had a few issues with this in the past, such as the video flickering in and out of visibility on scroll.
I ended up playing the videos in a light box since anything slider would leave the video playing as the carousel continued to scroll. Also, if you use an infinite scroller there were also issues with it playing the video in two places.
Providing you are using something like JW Player you will be able to set up some actions to pause the video on slide or similar but basic youtube embeds will be an issue.
Don't add the autoplay attribute to HTML5 video. What is probably happening is that the cloned copy of the video (first and last slides only) is playing the video, but all you hear is the audio since the panel is not in view. The reason you don't want to autoplay is because it will still autoplay even if AnythingSlider starts with another slide visible, and it won't stop until you cycle through the panels.
If you want the video to autoplay when the panel is visible, you'll have to add some script into the completed callback (video extension is not required with the code below; demo):
var playvid = function(slider) {
var vid = slider.$currentPage.find('video');
if (vid.length) {
// autoplay
vid[0].play();
}
};
$('#slider').anythingSlider({
// Autoplay video in initial panel, if one exists
onInitialized: function(e, slider) {
playvid(slider);
},
// pause video when out of view
onSlideInit: function(e, slider) {
var vid = slider.$lastPage.find('video');
if (vid.length && typeof(vid[0].pause) !== 'undefined') {
vid[0].pause();
}
},
// play video
onSlideComplete: function(slider) {
playvid(slider);
},
// pause slideshow if video is playing
isVideoPlaying: function(slider) {
var vid = slider.$currentPage.find('video');
return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);
}
});