I have and audio that is being played and I want to stop it from playing once the user clicks on a button. I have tried popcorn.mute(), but it does not give the result I want. I want something like popcorn.stop();
If you want to really destroy the video, you need to make sure that a) it's not playing and b) there are no references to it anywhere in memory, including the DOM. That way, the Javascript engine can garbage-collect it. Just to be extra thorough, we'll clear out the src.
var video = popcorn.media; //grab a reference to the actual video element
//make sure it's not playing
video.pause();
//clean up popcorn
popcorn.destroy();
popcorn.media = null; //popcorn should probably do this in destroy, but it doesn't
//clear the src, Make sure it's no longer using the network.
video.src = '';
video.load();
//remove from the DOM. You won't see it anymore.
if (video.parentNode) {
video.parentNode.removeChild(video);
}
You'll also want to clear any other references you may have to the video, and it probably couldn't hurt to remove any event listeners you may have added, whether directly on the video element or through Popcorn.
Related
After removing a cue it seems to be removed from the cues list but still displays within the html5 video. Is there a way to refresh the textTrack after removing one? I am able to add additional cues but not remove them.
var video = document.getElementById("vid1");
var track = video.textTracks[0];
track.mode = "showing";
var cue = new TextTrackCue(1.121,3.121,"test1");
cue.id = "cue1";
track.addCue(cue);
//some time later
track.removeCue(track.cues.getCueById(cue.id));
Edit: Internet Explorer browser, I'm able to use VTTCue's with other browsers and those remove with no issues.
Edit2: Upon further investigation I found that this is happening if the cue that I want to remove is active at the time that I am removing it. When that is the case, it seems to remove from the cues list but never stop displaying from the video. I am now thinking a possible solution is to force seek a different time in the video then remove, then seek back to the previous position. Does anyone know if there's a way to hide the caption first before I remove it to avoid having to seek?
I noticed there is a "mode" property of tracks which can be set to 0=disabled, 1=hidden, 2=showing. I found setting the mode to hidden on the line before removing a cue solves the problem.
track.mode = 'hidden';
removeCue(track.cues.getCueById(cue.id));
track.mode = 'showing';
I want to register an event handler to a video that is handled by the videojs but I can`t select the element in a reliable manner because the videojs removes the attributes from the video tag and add them to a container element that it adds.
videojs seems to append the same suffix: _html5_api to every video element ID, when it is wrapped inside the container div. Quoting from the source:
// Update tag id/class for use as HTML5 playback tech
// Might think we should do this after embedding in container so .vjs-tech class
// doesn't flash 100% width/height, but class only applies with .video-js parent
tag.id += '_html5_api';
So, one would argue that, a trivial fix would be something like this:
var vid = document.getElementById("ORIGINALVIDEOID_html5_api")
Of course, this hack lacks reliability since this suffix might change in future versions. However, one thing that is unlikely to be changed in the future, is the presence of the video element (albeit with a different ID) inside the wrapper div.
So, a more reliable way to obtain the video element per se is (assuming that the video tag ID is "cool"):
videojs("cool").ready(function(){
// Approach 1
var video1 = this.contentEl().querySelector("video");
console.log("video1");
console.log(video1);
// Approach 2
var video_id = this.contentEl().querySelector("video").getAttribute("id");
var video2 = document.getElementById(video_id);
console.log("video2");
console.log(video2);
// Not really needed, but here is a test that both approaches yield the same result
console.log("video1 === video2 ?")
console.log(video1===video2)
})
which yields in Firefox:
I included two approaches in the above script: one straightforward and one indirect (via the document and using the acquired ID). Of course you can use whichever of video1 and video2 you want.
A few things to note here:
This works only when inside a videojs().ready() function; this is a way to be 100% sure that the player is loaded
contentEl() returns the wrapper div and then, querySelector() is used on it to access the video element.
The other answers are trying to get a video element within the player but this is flawed as the player tech can be something other than a video element, e.g. the Flash tech. You should use the video.js API to listen to the events which will be surfaced from the tech.
var player = videojs("id");
player.on('play', function() {…});
I am using a Javascript code to detect if a video is loaded.
Once it is loaded I want to add an autoplay attribute to the <video> tag to make it play but I can't find a way to add that attribute. Here is the code I use:
window.addEventListener('load', function() {
var video = document.querySelector('#bgvid');
var div = document.getElementById('#bgvid');
function checkLoad() {
if (video.readyState === 4) {
alert('video is loaded')
video.setAttribute("autoplay")
} else {
setTimeout(checkLoad, 100);
}
}
checkLoad();
}, false);
******************* THE SOLUTION ********************
First, thanks DontVoteMeDown for the help.
Proper code should be:
document.getElementById('bgvid').addEventListener('canplaythrough', function() {
this.play();
});
Why not add the attribute to the tag? From the docs:
autoplay: (...) the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
So I presume (not sure, indeed) that the video will start playing as soon it loads a part of the video.
Anyway, if you still want to add the attribute, the video tag has some Events, from docs:
canplay: Sent when enough data is available that the media can be played, at least for a couple of frames;
canplaythrough: Sent when the ready state changes to CAN_PLAY_THROUGH, indicating that the entire media can be played without interruption(...);
So you can use one of those events to set the attribute, e.g:
document.getElementById('bgvid').addEventListener('canplay', function() {
this.setAttribute("autoplay", "autoplay");
});
With this you can avoid using timeouts, which isn't the best approach.
with autoplay enabled there is no need to check its load state, the video will simply play when it can, is loaded.
video.autoplay = true;
Look here
I'm making a HTML5 video player. I want it so that when the movie stops the play these executes
video.pause();
video.currentTime=0;
document.getElementById('message').innerHTML="Finished";
I tried this but it didn't work
function rewsi() {
var video = document.getElementsByTagName('video')[0];
if (video.currentTime==video.duration) {
video.pause();
video.currentTime=0;
document.getElementById('message').innerHTML="Finished";
}
}
Anyone got a solution for this problem?
Problem = My lack of knowledge in JavaScript
Looking at the following question and asnwer:
HTML5 <video> callbacks?
I would assign a callback to be executed when the video has actually ended like so:
var Media = document.getElementsByTagName('video')[0];
var Message = document.getElementById('message');
Media.bind('ended',function(){
Message.innerHTML = "The media file has completed";
});
You also stated that when the media 'stops' you want to pause the video, can you describe your motives for doing that ?
The next on the agenda is the video resetting as such, looks like you want to set the position of the media to the start if the media stops, you must first make sure that your determining that the video has not been paused, as you do not want to reset the position if the user has gone to make a cup of coffee.
If you only want to set the media position when the movie has actually ended then this would be pointless (unless you have a valid reason to do so), the reason it would be pointless is that when the user clicks play after it has ended, the default action html5 media player takes is to set the position to 0.
The above solution should work out exactly right for you.
i will recommend using Kaltura HTML5 Video Library to help you manage the media player.
First, you can check if the video has ended by simply putting a condition on video.ended. Then you can set the time with this.currentTime(0);
I'm wondering how to stop the MediaElement.js player at the end of the video. I wondered how to stop the mediaelement.js player at the end of a video. I was hoping to hold on the last frame and not rewind to show the first frame as it does now.
Is it possible to change this behaviour?
I wrote a fix for this problem and John merged in version 2.10.2.
There is now an option "autoRewind" that you can set to false to prevent the player from going back to the beginning.
The eventlistener is not added and there is no more need to remove it.
$('video').mediaelementplayer({
autoRewind: false
});
I believe that the default behavior of the <video> element is to go back to the beginning so you'd just need to override this by listening for the ended event.
var player = $('#myvideo').mediaelementplayer();
player.media.addEventListener('ended', function(e) {
player.media.setCurrentTime(player.media.duration);
}, false);
Hope that helps!
Probably the best solution is not to be afraid and remove the "rewind-to-start-on-video-end" handler from mediaelement source.
If you go into the source code for mediaelement and search for "ended", you'll eventually see, that rewinding after reaching end of the video is actually done deliberately by mediaelement.
If you want to remove that functionality feel free to just remove that handler for "ended" event from mediaelement source. That solves all the problems, including flickering between last and first frame, mentioned in some other answers to this question.
The code in John Dyer's answer didn't really work for me either for some reason. I was however able to get this version working...
var videoPlayer = new MediaElementPlayer('#homepage-player', {
loop: false,
features:[],
enablePluginDebug: false,
plugins: ['flash','silverlight'],
pluginPath: '/js/mediaelement/',
flashName: 'flashmediaelement.swf',
silverlightName: 'silverlightmediaelement.xap',
success: function (mediaElement, domObject) {
// add event listener
mediaElement.addEventListener('ended', function(e) {
mediaElement.pause();
mediaElement.setCurrentTime(mediaElement.duration);
}, false);
},
error: function () {
}
});
videoPlayer.play();
The only problem I'm having - which is very frustrating, is it is flickering between the LAST and FIRST frames in Chrome. Otherwise, it works as expected in Firefox and IE...
This problem i faced when playing audio files
The problem is in the play, when you pause your player the file will stop but before resuming you have to decrease the current time of the player by any value in your case you may decrease it by a frame maybe
after setting your source ,loading your file and pausing, then
myplayer.player.play();
var currentTime = myplayer.player.getCurrentTime();
myplayer.player.setCurrentTime(currentTime-0.1);
myplayer.player.setCurrentRail();