I have a video embed using the following code:
<video controls='false' preload='true'
onplay='doPlayEvent()'
onpause='doPauseEvent()'
onended='doEndEvent()';
src='/the_video.mp4'
id='VideoID'>
<source type='video/mp4' src='/the_video.mp4'></source>
<source type='video/ogg' src='/the_video.ogg'></source>
<source type='video/webm' src='/the_video.webm'></source>
</video>
Some strange behavior is that FireFox is playing the flash fallback AND more importantly the onplay, pause and ended events are not firing in FF or IE8 (I assume anything using flash).
Does anyone know what I'm missing to enable the events in flash?
For the onplay, onpause etc, to work in the flash fallback you need to add the event listeners into the JavaScript where you create the MediaElement e.g.
mediaElement = new MediaElementPlayer('video',{
//options etc
// method that fires when the Flash or Silverlight object is ready
success: function (mediaElement, domObject) {
// add event listeners
mediaElement.addEventListener('timeupdate', function(e) {
onVideoTimeUpdate(e);
}, false);
mediaElement.addEventListener('pause', function(e) {
onVideoPaused(e);
}, false);
mediaElement.addEventListener('play', function(e) {
onVideoPlayed(e);
}, false);
//etc
}
Related
I'm developing a kind of kiosk system for firefox. Therefore I need to listen to the load event, everytime a link is clicked and a new page / document is loaded. I used this in the js file to accomplish that:
window.addEventListener('load', function () {
gBrowser.addEventListener('DOMContentLoaded', function () {
alert("load");
}, false);
}, false);
But the event is only fired if i open the new browser window but not on reload or loading another content.
What could I do?
You should probably use nsIWindowWatcher service to do this:
let {Services} = Cu.import("resource://gre/modules/Services.jsm", {});
function windowObserver(aSubject, aTopic, aData) {
if (aTopic == "domwindowopened") {
let win = aSubject.QueryInterface(Ci.nsIDOMWindow);
// Do stuff here
}
}
// To start watching windows do this
Services.ww.registerNotification(windowObserver);
// To stop watching windows do this
Services.ww.unregisterNotification(windowObserver);
I'm using the videojs currentTime() function to jump to a specific time in the video. I have it working in Chrome, but Firefox (16) doesn't seem to respond (other api functions like play/pause do work in FF).
Videojs api docs: https://github.com/zencoder/video-js/blob/master/docs/api.md#currenttimeseconds--type-integer-or-float
_V_("video").ready(function(){
var vidplayer = this;
});
$(function() {
$('#time').click(function() {
seconds = $(this).text();
vidplayer.currentTime(seconds);
vidplayer.play();
});
});
I'm using the <audio> tag to play audio files across a number of browsers.
var audioTag = document.createElement("audio"),
sourceTag = document.createElement("source"),
sorryTag = document.createElement("div");
sorryTag.innerHTML = "This filetype not supported";
audioTag.onerror = function() {
//some error handling code
}
sourceTag.onerror = function() {
/some error handling code
}
sourceTag.src = "myfile.mp3";
audioTag.appendChild(sourceTag);
audioTag.appendChild(sorryTag);
//add audioTag to DOM
This leads to
<audio>
<source src='myfile.mp3' />
<div>This filetype not supported</div>
</audio>
Firefox can't play MP3 files, and I'm OK with that. Mozilla also promises that an error event will be dispatched if the <audio> or <video> tag can't play the media. And also it will go through the tags nested inside the media tag one by one (<source> or others, the last presumably being an error message) till it finds one it can work with. None of these seem to work for me; the error event is never fired on the elements nor is the error message displayed. What am I doing wrong?
The workaround I found was:
var audioTag = document.createElement("audio"),
sourceTag = document.createElement("source");
//Add error event listeners for browsers other than FF
audioTag.onerror = function() {
console.log("file can't be played. error from audio tag");
}
sourceTag.onerror = function() {
console.log("file can't be played. error from source tag");
}
//The only way to tell that file failed to play on FF
//Timeout is because audioTag.networkState === audioTag.NETWORK_NO_SOURCE
//on IE till it starts downloading the file
setTimeout(function() {
if(audioTag.networkState === audioTag.NETWORK_NO_SOURCE) {
console.log("this hack is only for <audio> on FF.");
console.log("Not for <video> and on no other browsers");
}
}, 3000);
sourceTag.src = "<file_url>";
audioTag.appendChild(sourceTag);
Basically, create the media and source tags, add error handlers, then append the source tag to the media tag and if the error event fires, then you know the file is unplayable.
On FF, the error event doesn't fire and you have to rely on the networkState flag of the <audio> element, comparing it to NETWORK_NO_SOURCE. You can't inspect it immediately after setting the src attribute of the <source> element because on IE networkState === NETWORK_NO_SOURCE till the browser actually starts downloading the file. For this reason, set a timeout of about 3 seconds (it's not an exact science) before checking the flag value and there's a good chance that you will have given IE enough time to determine if it's capable of playing the file.
UPDATE
Wrote a test case for this: http://jogjayr.github.com/FF-Audio-Test-Case/ but the error event fires OK there. Guess I was wrong; that or it was broken on FF14 (which I was using at the time), because the error event fires OK in my application too. Thanks #BorisZbarsky
Does anyone have a URL of a successful multivideo gallery using mediaelement.js where the same instance of MediaElementPlayer is reused and have it working with the Flash fallback for IE8 & 7?
I have partial success changing the setSrc as a function after the new MediaElementPlayer is created for the first time. This is robust for the HTML5 component but failing for the flash fallback. setSrc is consoling as not available in IE8 & 7. It fails to recognise the object.
Moving the setSrc to the "success" part of the new MediaElementPlayer does load the Flash fallback and HTML5 video as expected. On attempting to change the source of the player I have attempted to "destroy" and recreate the MediaElementPlayer object on the fly without success. I have not declared player using var=player so reasonably have expected to delete it but without success:
player = false;
delete player;
//make a new instance of the mediaelement video player
player = new MediaElementPlayer('#videoPlayer', {
pluginPath: ''+basePath+'_Includes/JS/',
success: function (player, node) {
//set the size (for flash otherwise no video just sound!)
if($("#rg-gallery.smallGallery").length > 0){
player.setVideoSize(400, 225);
} else{
player.setVideoSize(640, 360);
}
player.setSrc([
{ src: mp4, type: 'video/mp4' },
{ src: webm, type: 'video/webm' }
]);
player.load();
player.pause();
//if the video plays stop the slideshow
player.addEventListener('play', function () {
videoPlaying.push('playing');
stopSlideshow();
}, false);
}
});
Research both here and on the web shows that others are attempting to try this type of dynamic gallery but I am unable to find an example that shows it as technically viable.
Any example URLs where someone's cracked it would be lovely. Thanks :)
Solved.
Created a JS variable of video code:
var playerView = '<video width="640" height="360" id="videoPlayer" class="video-js vjs-default-skin" poster="" controls preload="auto"><source id="mp4" type="video/mp4" src="" /><source id="webm" type="video/webm" src="" /></video>';
On initialization removed any DOM rendering of any existing player, set it to false and deleted it:
//remove any existing video player
$(".mejs-container").remove();
player = false;
delete player;
Appended new video view to DOM:
//add a new one
$(".rg-video").append(playerView);
Created new instance of player and set src and load as normal:
//make a new instance of the mediaelement video player
player = new MediaElementPlayer('#videoPlayer', { ...
HTML5 video and Flash video fallback for IE8 & 7 now working as part of dynamic mixed media gallery.
Off for tea and medals.
:)
Do someone know; how to handle touchstart and touchend events on jquery mobile's slider?
I can only handle change and start event but couldn't find a solution for touchend.
My goal is to block tracing the slider changes when not being touched.
Any help will be very appreciated.
Thanks,
My codes:
HTML:
<input type="range" name="slider" id="slider" class="slider" value="1000" min="500" max="20000" data-highlight="true" data-mini="true" />
JS:
starts tracing after being touched (will keep tracing):
$('#slider').next().children('a').bind('taphold', function () {
$('#slider').live("change", function (event, ui) {
//do some stuff here...
});
});
always trace:
$('#slider').live("change", function (event, ui) {
//do some stuff here...
});
stop tracing after touch ends:
??? I have to stop tracing somehow
What about using vmouseup. As it's stated in the doc, it's the event you have to use to handle touchend or mouseup events.
You could combine that with the use of unbind to achieve your goal no?
EDIT:
I just tested with chrome and the following
$('#slider').next().children('a').bind('taphold', function() {
console.log("bind");
$('#slider').bind("change", function(event, ui) {
console.log(this.value);
});
});
$('#slider').next().children('a').bind('vmouseup', function() {
console.log("unbind");
$('#slider').unbind("change")
});
works exactly as expected. In the console I get a "bind" when I do a taphold (that is a long clic on a laptop) and then every move outputs the value. When I release my mouse I get an "unbind" and then sliding whithout holding still beforehand does not output the value (no output either if the value is changed thru the slider box).