Slides from my talk discussing my experience rebuilding a video player I previously developed in Flash. I gave this talk on March 18th, at the Brisbane Web Design Meetup.
18. Javascript to Control Video
$(’video’).get(0).play();
e ll the
o uld t t
t his w e lemen
v ideo
first o
p age t
on your .
p laying
st art
19. Javascript to Control Video
var _MEDIA = $(’#player video.ecard’).get(0); get the
video element...
$(’.play_button’).click(togglePlay);
$(’.mute_button’).click(toggleMute);
function togglePlay(e) {
if(_MEDIA.paused) { add some simple
_MEDIA.play(); event listeners....
} else { if paused play
_MEDIA.pause(); otherwise pause...
}
return false;
};
function toggleMute(e) {
if(_MEDIA.volume > 0) {
_MEDIA.volume = 0;
} else {
_MEDIA.volume = 1; if it has volume mute
} otherwise turn on volume...
return false;
};
20. <video> methods & attributes
var video = $(’video’).get(0);
video.play();
video.pause();
video.paused; // Returns true if video is paused.
video.ended; // Returns true if video is over.
video.volume; // Returns volume value (between 0-1)
video.volume=0.5; // Sets volume value (between 0-1)
video.currentTime; // Current point of time in the video.
video.length; // Returns the length in seconds.
video.seekable; // Returns true if supports seeking.
video.playbackRate; // Allows you to rewind/fastforward.
21. To see all of the <video>
methods & attributes
be sure to take a look at the
whatwg working draft:
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html
or just use this link:
http://bit.ly/2nkxD
25. Video player that loads and
displays cuepoints and
messages from a datasource.
Skip to demo now if possible.
http://sumocreations.com/demo/rattlebox/player.html