Using dash.js player -- when video buffers I have to show a notification please reload video. when I am using this 'BUFFER_EMPTY' this event is hitting when the video loads for the first time. I don't want this event to hit first time of load.
if (x.Url !== null) {
var video,
player,
url = x.Url
video = document.getElementById('livevideo' + x.ChannelId);
player = dashjs.MediaPlayer().create();
player.initialize(video, url, true);
player.on(dashjs.MediaPlayer.events["BUFFER_EMPTY"], function (e) {
Notification.error("Player error, please reload..");
$scope.isPlayerError = true;
});
else {
Notification.error("Channel-" + x.ChannelId + " URL not received (or) device offline.");
}
Related
I am using video tag on my website. It works with every major browser, but I am running into issues with Firefox.
When I tap on the play button video scrolls to the end of video!
In order to start the video I need to rewind video to position other than start and than click on play.
Weird.
I tried to set initial position of video to 1s but it didn't help.
I still need to scroll it manually.
Any help will be appreciated.
Thank you
<video width="80% height="80%" controls id="video1">
<source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.mp4" type="video/mp4">
<source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.ogv" type="video/ogg">
<source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.webmhd.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Javascript:
V I D E O */
function setupVideo(){
if(!myVideo){
console.log("Setting up video");
myVideo=document.getElementById("video1");
timeElapsed = 0;
timer;
myVideo.addEventListener("play",videoStarted,false);
myVideo.addEventListener("pause",videoPaused,false);
myVideo.addEventListener("loadeddata",videoLoaded,false);
console.log(" Video Element is: "+myVideo);
}
else{
console.log("Video Was Already set");
playPause();
}
}
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function videoLoaded(e)
{
console.log(" Video Loaded ");
myVideo.currentTime = 1;
}
function videoStarted(e)
{
console.log("Video Started");
//start the timer
timer = setInterval(videoPlaying,1000);
}
function videoPlaying(){
timeElapsed ++;
console.log("Video Playing "+myVideo.currentTime);
if(Math.ceil(myVideo.currentTime)== 10)
{
console.log(" it reached 10 now display quiz");
playPause();
}
}
function videoPaused(e)
{
clearInterval(timer);
console.log("Pause");
}
Your WebM or OGV video may have negative or invalid timestamps. Some software produces video that starts at a time slightly less than zero, particularly if the audio and video frames are not aligned to start at the same time. (That is, the video may start slightly before 0 and the audio may start at 0.)
If the video is produced with ffmpeg, try using the option -avoid_negative_ts 1.
If you have the mkvtoolnix package installed you can view the timestamps in a webm file with the command mkvinfo -s file.webm.
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.
:)
I am trying to code my own simple AJAX image upload script via jQuery. I have found some plugins but they are way too customized for what's needed, and I cannot get any of them working properly.
I just want to somehow detect when the user drags and drops an image onto the page. From there I'm sure it's not hard to upload that data and move into a /cache/ directory and allow for further options..
but right now I'm totally stuck with the drag/drop functionality. Literally no idea how I should approach this. What kind of event handler is needed? Will I need to custom code my own event handler? Any advice would be more than appreciated
What kind of event handler is needed?
Drag'n'drop requires a HTML5 browser - but that's pretty much all of them now.
I'd recommend not starting from scratch as there's quite a bit of code needed - I quite like this wrapper that implements it as a jQuery plugin.
http://www.github.com/weixiyen/jquery-filedrop
After defining an element in the document with class div, you can initialise it to accept dropped files with:
function fileSetUploadPercent(percent, divID){
var uploadString = "Uploaded " + percent + " %";
$('#'.divID).text(uploadString);
}
function fileUploadStarted(index, file, files_count){
var divID = getDivID(index, file);
createFileUploadDiv(divID); //create the div that will hold the upload status
fileSetUploadPercent(0, divID); //set the upload status to be 0
}
function fileUploadUpdate(index, file, currentProgress){
//Logger.log("fileUploadUpdate(index, file, currentProgress)");
var string = "index = " + index + " Uploading file " + file.fileName + " size is " + file.fileSize + " Progress = " + currentProgress;
$('#status').text(string);
var divID = getDivID(index, file);
fileSetUploadPercent(currentProgress, divID);
}
function fileUploadFinished(index, file, json, timeDiff){
var divID = getDivID(index, file);
fileSetUploadPercent(100, divID);
if(json.status == "OK"){
createThumbnailDiv(index, file, json.url, json.thumbnailURL);
}
}
function fileDocOver(event){
$('#fileDropTarget').css('border', '2px dashed #000000').text("Drop files here");
}
$(".fileDrop").filedrop({
fallback_id: 'fallbackFileDrop',
url: '/api/upload.php',
// refresh: 1000,
paramname: 'fileUpload',
// maxfiles: 25, // Ignored if queuefiles is set > 0
maxfilesize: 4, // MB file size limit
// queuefiles: 0, // Max files before queueing (for large volume uploads)
// queuewait: 200, // Queue wait time if full
// data: {},
// headers: {},
// drop: empty,
// dragEnter: empty,
// dragOver: empty,
// dragLeave: empty,
// docEnter: empty,
docOver: fileDocOver,
// docLeave: fileDocLeave,
// beforeEach: empty,
// afterAll: empty,
// rename: empty,
// error: function(err, file, i) {
// alert(err);
// },
uploadStarted: fileUploadStarted,
uploadFinished: fileUploadFinished,
progressUpdated: fileUploadUpdate,
// speedUpdated
});
The bit of the web page that accepts uploads has this HTML.
<div class='fileDrop'>
Upload a file by dragging it.
<span id='fileDropTarget'/>
</div>
The file drop works on the outer <div> but it's nice to make a nice big target that says 'DROP HERE' so that users aren't confused about where they need to drop the file.
Probably too late. But you should checkout http://www.dropzonejs.com/
I am building this slideshow, hereby a temp URL:
http://ferdy.dnsalias.com/apps/jungledragon/html/tag/96/homepage/slideshow/mostcomments
There are multiple ways to navigate, clicking the big image goes to the next image, clicking the arrows go to the next or previous image, and you can use your keyboard arrows as well. All of these events call a method loadImage (in slideshow.js).
The image loading is fine, however at the end of that routine I'm making a remote Ajax call using $.get. The purpose of this call is to count the view of that image. Here is the pseudo, snipped:
function loadImage(id,url) {
// general image loading routine
// enable loader indicator
$("#loading").show();
var imagePreloader = new Image();
imagePreloader.src = url;
loading = true;
$(imagePreloader).imagesLoaded(function() {
// load completed, hide the loading indicator
$("#loading").hide();
// set the image src, this effectively shows the image
var img = $("#bigimage img");
img.attr({ src: url, id: id });
imageStartTime = new Date().getTime();
// reset the image dimensions based upon its orientation
var wide = imagePreloader.width >= imagePreloader.height;
if (wide) {
img.addClass('wide');
img.removeClass('high');
img.removeAttr('height');
} else {
img.addClass('high');
img.removeClass('wide');
img.removeAttr('width');
}
// update thumb status
$(".photos li.active").removeClass('active');
$("#li-" + id).addClass('active');
// get the title and other attributes from the active thumb and set it on the big image
var imgTitle = $("#li-" + id + " a").attr('title');
var userID = $("#li-" + id + " a").attr('data-user_id');
var userName = $("#li-" + id + " a").attr('data-user_name');
$(".caption").fadeOut(400,function(){
$(".caption h1").html('' + imgTitle + '');
$(".caption small").html('Uploaded by ' + userName + '');
$(".caption").fadeIn();
});
// update counter
$(".counter").fadeOut(400,function() { $(".counter").text(parseInt($('.photos li.active .photo').attr('rel'))+1).fadeIn(); });
// call image view recording function
$.get(basepath + "image/" + id + "/record/human");
// loading routine completed
loading = false;
}
There is a lot of stuff in there that is not relevant. At the end you can see I am doing the $.get call. The problem is that it is triggered in very strange ways. The first time I navigate to a tumb, it is called once. The next time it is triggered twice. After that, it is triggered 2 or 3 times per navigation action, usually 3.
I figured it must be that my events return multiple elements and therefore call the loadimage routine multiple times. So I placed log statements in both the events and the loadimage routine. It turns out loadimage is called correctly, only once per click.
This means that it seems that the $.get is doing this within the context of a single call. I'm stunned.
Your problem may be:.imagesLoaded is a jQuery plug in that runs through all images on the page. If you want to attach a load event to the imagePreloader only, use
$(imagePreloader).load(function() {
...
}
Otherwise, please provide the code where you call the loadImage() function.
Update:
when clicking on a thumb That is the problem. $(".photos li a").live('click',... should only be called once on page load. Adding a click handler every time a thumb is clicked will not remove the previous handlers.
Another option is to change the code to $(".photos li a").unbind('click').live('click', ... which will remove the previously registered click handlers.