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]);
});
};
Related
When exporting a Premiere sequence with warp stabilizer applied, which is not analysed, Premiere will show a big banner across the video.
Therefore I'm trying to write a script, what tells Premiere to analyse a clip, that has warp stabilizer applied.
So far I can get Premiere to give me information about the effects of a clip, but I can't find a way to trigger the "Analyse" button inside the warp stabilizer. Also ExtendedScript Toolkit documentation isn't very helpful at this.
How can I tell Premiere to analyse the clip?
Thats my script so far:
// get active sequence
var seq = app.project.activeSequence;
if (seq) {
// get first video layer
var firstVideoTrack = seq.videoTracks[0];
if (firstVideoTrack) {
// get first video clip
var firstClip = firstVideoTrack.clips[0];
if (firstClip) {
// get effects applied to clip
var clipComponents = firstClip.components;
if (clipComponents) {
// loop through effects to find match
for (var i = 0; i < clipComponents.numItems; ++i) {
if (clipComponents[i].matchName == "AE.ADBE SubspaceStabilizer") {
var stabProps = clipComponents[i].properties;
?????????
break;
}
}
}
}
}
}
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);
}
developing Web app for gear s2, I am trying to play next/previous audio file when bezel is rotated clockwise/counterclockwise.
just like the "Music Player" on the watch.
what I tried so far is as follows, but only the second song plays when I rotate the bezel clockwise and when I rotate CCW, only the first song plays.
I don't know how to write it so that EACH time that I rotate the bezel, it goes to the next song.
var audio = new Audio();
var source = ["songs/coldplay.mp3", "songs/abba.mp3", "songs/goodbye.mp3", "songs/sleep.mp3"];
var i = 0;
var current = null;
rotaryDetentHandler = function(e) {
direction = e.detail.direction;
if (direction === "CW") {
if(i <source.length)
i++;
else i=source.length;
}
if (direction === "CCW") {
if(i>0)
i-- ;
else i = 0;
}
if(current !=null)
{stop();}
audio.src = source [i];
audio.load();
audio.play();
current = audio;
}
function stop()
{
current.pause();
}
Hopefully someone can find out what the problem is or if there is another way to do it.
Thank you.
for anyone having this problem, I finally found out what the problem is.
You have to add an EventListener to the page, like below:
page.addEventListener("pagebeforeshow", function() {
// do something
});
I have multiple videos on a site (mediaelement.js)
When i play one, all others pause and end which is fine.
But i want to show also the poster again.
How can i do it?
for now i modified the pauseOtherPlayers (function) to set the time back to 0 but i want the poster to show not only the beginning.
// FOCUS: when a video starts playing, it takes focus from other players (possibily pausing them)
media.addEventListener('play', function() {
var playerIndex;
// go through all other players
for (playerIndex in mejs.players) {
var p = mejs.players[playerIndex];
if (p.id != t.id && t.options.pauseOtherPlayers && !p.paused && !p.ended) {
p.pause();
p.setCurrentTime(0);
}
p.hasFocus = false;
}
t.hasFocus = true;
},false);
Whats the function to show the poster?
poster.show(); somehow does not work
thx
//////////////////////////////////////////////////////////////////////////////////////////
ok figured it out myself.
heres the code if anyone interested:
success: function (mediaElement, domObject) {
mediaElement.addEventListener("pause", function(e){
// Revert to the poster image when ended
var $thisMediaElement = (mediaElement.id) ? jQuery("#"+mediaElement.id) : jQuery(mediaElement);
$thisMediaElement.parents(".mejs-inner").find(".mejs-poster").show();
});
}
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.