Develop Reference

HTML5 video player with custom controls: use [ESC] to exit full screen

I am making an HTML5 video player with custom controls. You can see it in THIS jsFiddle.
The HTML is "classic":
<div class="video-container">
<video poster="http://code-love.me/video/posters/flamenco.jpg">
<source src="http://code-love.me/video/videos/flamenco.mp4" type="video/mp4" />
<source src="http://code-love.me/video/videos/flamenco.ogg" type="video/ogg" />
</video>
<div class="controls-wrapper">
<div class="progress-bar">
<div class="progress"></div>
</div>
<ul class="video-controls">
<li><input type="button" name="play-pause" value="Play" class="play"></li>
<li class="fullscreen-container"><input type="button" name="toggle-fullscreen" value="Fullscreen" class="fullscreen"></li>
</ul>
</div>
</div>
I have a full screen function that I call upon 2 events: clicking the full screen button and pressing Esc key.
Clicking the full screen button toggles full-screen mode ok, but I can't see why using the key does not. After all , it's the same function....
Any hints? Ty!

Now that I understood your goal, you cannot listen to keypress events in full screen mode due security risks, there are ways to enable this in Chrome, but I strongly advise against that.
What you can do is that, you can listen to webkitfullscreenchange mozfullscreenchange fullscreenchange events (multiple events for browser compatibility reasons).
Then act when these events occur.
$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
var event = state ? 'FullscreenOn' : 'FullscreenOff';
// Now do something interesting
if(event === 'FullscreenOff') {
// Do something when user exists fullscreen
} else {
// Do something when user enters fullscreen
}
});

Add an audio player, Enable and Disable tab

here in this blog I found an interesting effect that I put into practice programming using the footer attribute. The effect is to slide the footer as if it were like a tab for which to program I worked.
Now the problem is if I add an audio player above the tab, when I want to start the audio playback, the tab slides to click on my player for example click on PLAY or stop, what I want is that only this Activated the FOOTER tab to click on it to slide, instead the audio player that does not perform any action in sliding as a bullet and only play when I click on it.
Here the codes:
HTML
<span class="fTab">
<!- - AUDIO- - >
<section id="repro">
<audio controls="controls" autoplay>
<source src="music.mp3" type="audio/mpeg" />
</audio>
</section>
***CONTENT***
</span>
<footer>
<section class="credit">
<div id="slideout_inner">
**CONTENT**
</div>
</section>
</footer>
JAVASCRIPT
jQuery(function($){
$('.fTab').on('click', function(){
$(this).toggleClass('active');
});
})
The css is long because it is not very important. The important thing is the javascript since it is the one that will execute the effect of sliding the FOOTER.
I hope you understand what I say, I hope your help from everyone. Thank you

You can use stopPropagation. If #repro element is clicked then the $(this).toggleClass('active'); won't be fired.
The event.stopPropagation() method stops the bubbling of an event to
parent elements, preventing any parent event handlers from being
executed.
$("#repro").click(function(event){
event.stopPropagation();
});

Custom HTML5 Audio Controls won't work

I'm trying to make custom HTML5 audio event buttons. I know I can use the controls but I want to make my own my code is below:
<audio autoplay="true" loop src="vid/birth.mp3"></audio>
<button onclick="document.getElementsByTagName('audio').play()">Play</button>
<button onclick="document.getElementByTagName('audio').pause()">Pause</button>
When I load the page the audio starts but the controls won't work, I click them and nothing happens. What am I doing incorrectly?
Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>

Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>

JavaScript key hooking issue on Chrome and Opera

I'm doing a video interface web with HTML5 and JavaScript.
I'm having problems with JavaScript because I need to control the video with keys so when someone press a key from the keyboard, for example 'P', the video will be on 'Play' or 'Pause'.
The problem is that it's not working on Chrome and Opera but does on Firefox.
The excerpts below are parts of the total code:
The HTML:
<video width="775" id="player" preload controls timeupdate="timeupdate()" onclick="repro()" onMouseOver="mostrarControles()" onMouseOut="ocultarControles()">
<source src="video.mp4" type="video/mp4" />
<source src="video.theora.ogv" type="video/ogg" />
<source src="video.webmvp8.webm" type="video/webm" />
TU NAVEGADOR NO SOPORTA VIDEO EN HTML5.
</video>
<div id="controls" onMouseOut="ocultarControles()" onMouseOver="mostrarControles()" >
<!-- Buttons of control-->
</div>
Java.JS - Function where I have problems on Chrome and Opera:
document.getElementById("controls").addEventListener('keydown',function(event) {
controlTeclado(event);
//alert("OK");
}, true);
I have detected that Chrome and Opera don't access inside the .addEventListener() and I don't know why, any idea?
ProgressBar.JS:
function controlTeclado(evento) {
mostrarControles(); // show controls on the web page
if (evento.keyCode==80) {
alert(" Key: "+evento.keyCode);
repro(); //play video
}
}

<div> elements do not receive key events by default. Only focusable elements such as form inputs and contenteditable elements do. To make a regular <div> able to fire key events, assign it a tabIndex (a value of zero means that the element is in the regular tab order):
<div id="controls" tabindex="0"
onMouseOut="ocultarControles()" onMouseOver="mostrarControles()">
...
</div>

MediaElement.js + Reveal JQuery modal: how to pause video/audio on <a="close-reveal-modal">×</a>

How do I simultaneously pause the player AND cause the the containing modal to slide up/away (to "un-reveal")?
Presently, after the play button is clicked, and the modal's upper-left (x)...the & #215;...is clicked...the modal slides away, but the video continues to play. To avoid this, the user must: 1) pause the video, and THEN 2) close the modal. I'd like a click or tap on any of the modal's triggers--for instance, clicking the (x)--to do both actions at the same time. I'm trying to find a solution that will work across platforms / devices.
Here's what I got so far, which is not working...
IN HEAD OF DOM BETWEEN SCRIPT TAGS
document.getElementById("pauseX").onclick = function () {
document.getElementById('player2').pause();
};
TRIGGER TO REVEAL MODAL
Click here to reveal modal.
VIDEO + MODAL CONTAINER
<div id="vid-1" class="reveal-modal">
<div class="center">
<video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
<source type="video/mp4" src="../media/vid-1-480x320.mp4" />
<source type="video/webm" src="../media/vid-1-640x480.webm" />
<object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">
<param name="movie" value="../build/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=../media/vid-1-480x320.mp4" />
<img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1"
title="No video playback. Update browser, enable Javascript, or install Flash." />
</object>
</video>
</div>
<a id="pauseX" class="close-reveal-modal">×</a>
</div>
Already tried many other solutions, including...
Javascript to stop HTML5 video playback on modal window close
...so any help is appreciated. I think it's possible either the MediaElement.js or Reveal.js file may need to be tweaked or something?
Incidentally, clicking anywhere outside of the modal--i.e., on the "gloss"--causes it to slide up/away; hitting the escape key on the keyboard does the same. Clicking anywhere on the video player causes it to pause. Would love it if all of these functions are retained along with tapping on mobile devices. (Haven't tested that yet.)

if you have document.getElementById("pauseX").onclick... at the top of your document probably the code doesn't work because element with id pauseX is not already on the dom. Look at the javascript console, you should see some related error
Try to move these instructions on the bottom or on DOM ready event

Got it solved with this script...
<script>
$('.close-reveal-modal').click(function() {
$('video, audio').each(function() {
$(this)[0].player.pause();
});
});
</script>
There were multiple MediaElement.js vids on each page (one for each potential modal)...each vid being identified with the same id="player2" attribute...which was also keeping the page from validating. Tried switching that in my original script from getElementByID to getElementByName...didn't work. Created a class in lieu of an ID for each player...that didn't work. Irregardless of the validation issues: the above solution--simply inserting the .close-reveal-modal class directly into the "stop all" script for MediaElement.js works great. (Thanks #Fabrizio for suggesting I examine my ID attributes to begin with...)