Before I go into the problem I would like to say that this is the first time I'm trying to write javascript using OOP. So please bear with me and guide me if I doing anything wrong.
As title says I am using HTML5 video to play videos in my application and here is the code which I wrote.
I have created an object Screens where I have a video tag.
var Screens = {
getVideoScreen:function(){
return "<div id=\"celebration\"><video id=\"myvideo1\" width=\"300px\" ><source src=\"video/winning.mp4\" type=\"video/mp4\"></video></div> ";
},
getVideoElement:function() {
return $("#celebration");
}
};
This is an object where I actually control video.
var obj = Object.create(Screens);
obj.playVideo = (function() {
var videoFile = "";
var play = false;
function start() {
$("body").append(obj.getVideoScreen());
document.getElementById("myvideo1").play();
document.getElementById("myvideo1").addEventListener("ended",function(){
end(); console.log("end");
}, false);
}
function end() {
obj.getVideoElement().remove();
}
return {
startVideo:function(flag) {
play = flag;
if(play) {
start();
}
else {
end();
}
}
}
})();
I have a button and on click it plays video,
$("#start").click(function() {
obj.playVideo.startVideo(true);
});
This works fine for around 5 to 10 times and later on it doesn't work. Doesn't work mean I get a white screen and video doesn't play. I inspected the page and video tag is there but doesn't play the video. I really don't have any idea about what is going wrong. I saw few posts and that didn't help. Looking ahead for a help....
EDIT :
I am using chrome Version 26.0.1410.64 m. And I'm concerned only about this browser.
You can see this page.
Related
I use videojs as player and I want if I restart the video for the second time to start reading from the last position before leaving it the last time
avant quitter le player je stocke la position
whereYouAt = player.currentTime();
var currentTime = localStorage.currentTime;
localStorage.currentTime = whereYouAt;
to restart it
playFilmVideo=function()
{
if (player.readyState() < 1) {
player.one("loadedmetadata", onLoadedMetadata);
}
else {
// metadata already loaded
onLoadedMetadata();
}
}
function onLoadedMetadata() {
var weAreAt = localStorage.currentTime;
var dri = weAreAt.split(".");
var LastTime= dri[0];
player.currentTime(LastTime);
}
when I launch the application for the first time the player starts reading from the position last.but when I leave the player without leaving the application and relaunch it again it starts reading from the beginning of the video
knowing that localStorage.currentTime is still recovering the last position
you can set/seek current time of video on load using following snippet.
myPlayer.currentTime(120); // 2 minutes into the video
ref - docs
My solution is to remove the fuction readyState() and it worked well:
player.on('loadedmetadata', function(msg) {
player.play();
onLoadedMetadata();
});
function onLoadedMetadata() {
var weAreAt = localStorage.currentTime;
var dri = weAreAt.split(".");
var LastTime= dri[0];
player.currentTime(LastTime);
}
I am trying to implement a feature where my index will auto refresh after one of the auto played videos play. I have tried various scripts yet none seem to work.
var videos = [
'D1sZ_vwqwcE',
'J7IMwop3RHs',
'BC_Ya4cY8RQ',
'HPc8QMycGno',
'JDglMK9sgIQ',
'gHssu4WOHug',
'hgKDu5pp_fU',
'5LILChvqUo4',
'4HVjldqWx4w',
'4UwH97qI0aM'
];
var index=Math.floor(Math.random() * videos.length);
index.onended = function() {
window.open("index.html", "_self");
};
var html='<div class="video-background"><div class="video-foreground"><iframe frameborder="0" src="https://www.youtube.com/embed/' +videos[index] + '?controls=1&showinfo=0&rel=0&autoplay=1&iv_load_policy=3&" allow="autoplay""></iframe></div></div>';
document.write(html);
What isn't working is the refresh script. I'm not sure if I'm linking it to the right variable or something.
var index=Math.floor(Math.random() * videos.length);
index.onended = function() {
window.open("index.html", "_self");
};
note the first line runs fine. It's the next 3 that I don't understand.
(this won't autoplay on chrome unless you hit ctrl+r. Since Chrome changed its autoplay policy.)
Good afternoon,
I've been following this tutorial to make a simple (!) html5 canvas game. I've been using the error console on Safari to help troubleshoot, but I can't figure this one out; I have an 'img' folder, containing all artwork, and a 'sounds' folder, containing all sounds.
All assets are loaded with the assetLoader and checked before the page loads - if something is missing or labelled incorrectly, it won't load.
The sounds 'do' play - the theme music runs fine, and sound effects trigger approx 60% - 70% of the time (jump sound, collide sound etc) but the folder hasn't loaded correctly. If I check the 'resources' tab, 'sounds' is now called 'Other', and if I click on any of the mp3's in that folder, I get the message 'An error occurred trying to load the resource'.
The assetLoader part of the code looks like this:
var assetLoader = (function() {
this.sounds = {
'bg' : 'sounds/theme.mp3',
'jump' : 'sounds/fart.mp3',
'gameOver' : 'sounds/gameOver.mp3',
'ding' : 'sounds/ding.mp3'
};
Then I have a var to check the total number of sound assets:
var numSounds = Object.keys(this.sounds).length;
Then I have this function to check the state:
function _checkAudioState(sound) {
if (this.sounds[sound].status === 'loading' && this.sounds[sound].readyState === 4)
{ assetLoaded.call(this, 'sounds', sound);
}
}
Finally, I have a downloadAll function that looks like this:
this.downloadAll = function() {
var _this = this;
var src;
for (var img in this.imgs) {
if (this.imgs.hasOwnProperty(img)) {
src = this.imgs[img];
(function(_this, img) {
_this.imgs[img] = new Image();
_this.imgs[img].status = 'loading';
_this.imgs[img].name = img;
_this.imgs[img].onload = function() { assetLoaded.call(_this, 'imgs', img) };
_this.imgs[img].src = src;
})(_this, img);
}
}
for (var sound in this.sounds) {
if (this.sounds.hasOwnProperty(sound)) {
src = this.sounds[sound];
(function(_this, sound) {
_this.sounds[sound] = new Audio();
_this.sounds[sound].status = 'loading';
_this.sounds[sound].name = sound;
_this.sounds[sound].addEventListener('canplay', function() {
_checkAudioState.call(_this, sound);
});
_this.sounds[sound].src = src;
_this.sounds[sound].preload = 'auto';
_this.sounds[sound].load();
})(_this, sound);
}
}
}
return {
imgs: this.imgs,
sounds: this.sounds,
totalAssest: this.totalAssest,
downloadAll: this.downloadAll
};
})();
I've left the images in this block of code as they work fine, and I think the sounds should too, but for some reason they don't. I have read about potential mp3 compatibility problems with browsers and html5 canvas, but as the sounds are playing I'm not sure this is the issue. If anyone can offer any insight, that would be much appreciated.
I cannot for the life of me get the sound to loop on Firefox at all. I've searched Google for hours and I still feel like I'm asking a stupid question, which there is an answer out there. Any help at all is highly appreciated. Thank you very much!
Here is what I have tried:
var newJobAudio = new Audio('/audio/newjobalert.mp3');
newJobAudio.loop = true;
newJobAudio.play();
Edit: Updated code (doesn't work still, but, just so everyone can see what I have)
var newJobAudio = new Audio('/audio/newjobalert.mp3');
audioLoop(true);
function audioLoop(play) {
if ( play ) {
newJobAudio.addEventListener('ended', playAudio, false);
newJobAudio.play();
} else {
newJobAudio.removeEventListener('ended', playAudio, false);
newJobAudio.pause();
}
}
function playAudio() {
newJobAudio.currentTime = 0;
newJobAudio.play();
}
Edit:
Even though tablet/phone Firefox works fine with mp3 the sound breaks after the first play. I was able to determine this by using a workaround for sound looping using setInterval. When setInterval started looping every 2 sec the sound would play fine first time but would break on the others. Rustam thanks you very much for all the help mate! =)
var newJobAudio1 = new Audio('/audio/newjobalert.mp3');
var newJobAudio2 = new Audio('/audio/newjobalert.mp3');
newJobAudio1.addEventListener('ended', function(){
this.currentTime = 0;
this.pause();
newJobAudio2.play();
}, false);
newJobAudio2.addEventListener('ended', function(){
this.currentTime = 0;
this.pause();
newJobAudio1.play();
}, false);
newJobAudio1.play(); // start playing
Use 2 audios and they will switch each other
I need to include some sound files on a website, i recorded them and used the super complicated:
<a href="seo.html" onmouseover="new Audio('sounds/seo.mp3').play()">
to play them when the user scrolls over with the mouse. There are a total of four links on the website.
The problem is, when i mouse over one of them it starts playing, and then if i mouse over another it plays that one as well. If i move the mouse really fast accross the links i end up getting Giberish because all files are being played at the same time. How do i stop this ??
Ideal would be that the others CANNOT be played until the current playing is finished :)
An approch below.
Note, untested ;-)
HTML
a sound link -
a sound link -
a sound link -
a sound link
JS
var links = document.querySelectorAll('a.onmousesound');
var currentPlayedAudioInstance = null;
var onHoverPlaySound = function(element) {
if (currentPlayedAudioInstance &&
currentPlayedAudioInstance instanceof Audio) {
// is playing ?
// http://stackoverflow.com/questions/8029391/how-can-i-tell-if-an-html5-audio-element-is-playing-with-javascript
if (!currentPlayedAudioInstance.paused && !currentPlayedAudioInstance.ended && 0 < currentPlayedAudioInstance.currentTime) {
return false;
}
}
var file = element.getAttribute('data-file');
currentPlayedAudioInstance = new Audio(file);
currentPlayedAudioInstance.play();
};
for (var i = 0; i < links.length; i++) {
link.addEventListene('onmouseover', function() {
onHoverPlaySound(links[i]);
});
};