We Keep Coding

Knowing if a YouTube video is on an ad using content script

I am making a chrome extension that needs to know if a YouTube video is being played, paused, had a duration change, and if it is on an ad. I figured out how to do everything except knowing if it is on an advertisement. I found this post which was of some help, however, if I were to put this in my content script it would only run once and I want it to constantly check if there is an ad (since ads can happen in the middle of a video.
I am fairly new to Javascript, but I do understand the concepts of listeners and I would use a listener in this case, however, I do not know how to do that in this case because the div does not emit an event, it either exists or is null. Are there any other ways of doing that?

+1 to looking at YouTube video API events. Here's that page [0].
I haven't tried this myself, but I would start with the onStateChange event, because I suspect that an ad is a separate video from the desired video content itself. So there could be two "video cued" or "5" values fired. But, again, I haven't tried it myself. Good luck!
[0] https://developers.google.com/youtube/iframe_api_reference#Events

You can also use setInterval to detect ads continuously. This is a way without having to looking for API.
// According to the post you provided
function detectAds() {
return !!document.querySelector("div.ad-showing");
}
let timer;
function listen() {
timer = setInterval(function () {
if (detectAds()) { /* do something */ }
}, 1000); // runs every second
}
function unlisten() {
if (timer) clearInterval(timer);
}

How do I make sure all resources are loaded before running a function?

I'm working on a music webapp that plays a random sequence of notes, but I ran into this issue: whenever it was the case that I was going to press play for the first time after the page loaded, the sequence would "choke" before getting on track. I thought maybe that was because the resources are not yet loaded when I press play for the very first time. I guess I was right, did some research, found this preload = auto thing, which seemed to solve this problem. At least, if you refresh or visit the page for the first time and press play immediately, it works just fine. However, if you don't do anything for a while, like 2/3 minutes, the same thing happens. There's a delayed start, as if it's loading the file, and then it awkwardly speeds up like it's trying to catch up with the setInterval timer. I wrote this very simplified version of the code just to illustrate:
<button>Play</button>
<audio src="source1.mp3"></audio>
<audio src="source2.mp3"></audio>
<audio src="source3.mp3"></audio>
<script>
let notes = []
document.querySelectorAll("audio").forEach(function(note){
notes.push(note)
})
function play(){
let random_index = Math.floor(Math.random() * 3),
note = notes[random_index]
note.play()
setInterval(function(){
note.pause()
note.currentTime = 0
play()
}, 500)
}
let button = document.querySelector("button")
button.addEventListener("click", function(){
play()
})
</script>
So my question is how do I solve this? Is there anyway to tell the function to hold until it can actually play the first file? Maybe a DOM event that fires when the resource is buffered and ready? I feel like I can't relly let the timer begin until I have a way to check that, otherwise it will go crazy as usual. Any ideas will be greatly appreciated!

The load event is called after the page is fully loaded:
window.addEventListener("load", function(){
// Your code
});
The DOMContentLoaded event is called after the DOM is loaded but before css and img.
document.addEventListener("DOMContentLoaded", function(){
// Your code
});

Play Mp3 sound clip on mouseclick using jplayer?

Actually this the first time I'm gonna use jplayer plugin, so all I need is to play a sound clip (2 sec) when I click on a div, and I don't know how to use jplayer!
I also need to load the sound clip file in cache as well as the page is loading, so when I click that div the sound clip plays immediately without loading it when clicking
btw, is it possible to do that without using jplayer, jquery maybe?!

If you want to stick with jPlayer, try setting warningAlerts and errorAlerts to true.
$(id).jPlayer( { warningAlerts: true, errorAlerts: true } );
This may solve your problem.
But as long as you only need sound (no video), SoundManager 2 might be a better fit for you. Its really robust and provides extensive debugging output.
soundManager.url = './swf/'; // directory where SM2 .SWFs live
var mySound;
soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
mySound = soundManager.createSound({
id: 'someSound',
url: '/path/to/some.mp3'
});
});
//....
//if(xhr-stuff)
if(mySound)
mySound.play();
Use soundmanager2.js for testing and soundmanager2-nodebug-jsmin.js for production. If you have further questions, don't hesistate to ask.

-snip-
scratch that... there's an api
http://www.jplayer.org/latest/developer-guide/#jPlayer-play
Use
$("#jpId").jPlayer("play");

Stopping instead of rewinding at the end of a video in MediaElement.js

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();

Detecting end of Flash movie in javascript

Is there a way to detect end of Flash movie (OOTB, without using some sort of flash callback).
Alternatively, is there a way to know the length of the movie?
Update:
IsPlaying() looked promising (periodically checking it), but as it turns out, nobody is creating straight forward swfs any more; now, the content is embedded in main layer and while the content plays, the main movie is stopped and IsPlaying is always false...

var movie = window.document.movie
if(movie.TCurrentFrame("/") == movie.TotalFrames())
alert("Movie Finished");
or you could have:
if (!movie.IsPlaying())
alert("Movie Stopped");
but thats not really what you're after.

import fl.video.VideoEvent.COMPLETE
video.addEventListener(VideoEvent.COMPLETE, alertHTML);
function alertHTML(e:VideoEvent):void{
ExternalInterface.call("alert(\"Video has stopped\");");
}
Give that a shot. You can replace the alert(\"Video has stopped\"); with your client-side javascript function.

You can chceck for movie length with ffmpeg -i movie.flv 2>&1, but i doesnt' tell you:
how long it takes to load the video and start playing
whether the user has hit the "pause" button.
Right now, the only way is to attach some javascript handlers to Flash events as other posts suggest.