5 Things You Need to Know to Start Using Video and Audio Today
-
Upload
nigel-parker -
Category
Technology
-
view
6.146 -
download
1
description
Transcript of 5 Things You Need to Know to Start Using Video and Audio Today
![Page 1: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/1.jpg)
![Page 2: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/2.jpg)
![Page 3: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/3.jpg)
![Page 4: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/4.jpg)
<audio <video
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none, metadata, auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play, pause, scrub bar)
> >
… …
</audio> </video>
![Page 5: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/5.jpg)
![Page 6: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/6.jpg)
![Page 7: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/7.jpg)
![Page 8: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/8.jpg)
* If WebM is installed !
*
! *
!
Chrome is removing support for H.264
Microsoft released a H.264 Extension for Chrome on Windows 7
![Page 9: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/9.jpg)
You Need More Than One
![Page 10: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/10.jpg)
You Need Both Big & Small
![Page 11: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/11.jpg)
Unlikely To Change Anytime Soon
![Page 12: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/12.jpg)
<video controls>
<source src=hi-res.mp4 type=‘video/mp4;
codecs="avc1.64001E, mp4a.40.2"’
media="(min-device-width: 800px)">
<source src=lo-res.mp4 type=‘video/mp4;
codecs="avc1.42E01E, mp4a.40.2"’>
<source src=hi-res.ogv type=‘video/ogg;
codecs="theora, vorbis"’
media="(min-device-width: 800px)">
<source src=lo-res.ogv type=‘video/ogg;
codecs="theora, vorbis"’>
fall-back content only displayed by browsers that
do not support the <video> element
</video>
* Due to bug in iPhone/iPad iOS 3.x, mp4 should always be first
![Page 13: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/13.jpg)
Encoding Optimizations
![Page 14: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/14.jpg)
Offload Encoding to the Cloud
![Page 15: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/15.jpg)
Seek Ahead Bit Rate Throttling
HTTP 1.1-compatible web server
![Page 16: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/16.jpg)
![Page 17: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/17.jpg)
by Jo Christian Oterhals
Broadcast in HD Where Available
![Page 18: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/18.jpg)
Video Corruption – Dropped Frames
![Page 19: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/19.jpg)
Are there encoding settings that we can use to reduce corruption?
![Page 20: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/20.jpg)
Baseline *
Larger file
Less CPU to Decode
Quick to Encode
Main
High
Smaller File
More CPU to Decode
Longer to Encode
baseline profile must be main profile compatible to support DirectX Video Acceleration
![Page 22: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/22.jpg)
Styling with Canvas & CSS
![Page 23: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/23.jpg)
Drawing with Canvas
![Page 24: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/24.jpg)
Drawing with CanvasHide the Video display a Canvas
30 times per second draw the cropped video onto canvas
<div style="display:none">
<video id="sourcevid" autoplay preload="auto" width="1920"
onloadedmetadata="init()">
</div>
<canvas id="output" width="960" height="540"></canvas>
function processFrame() {
// manipulate image here cropping and scaling as needed
draw.drawImage(video, cX, cY, w, h, 0, 0, w, h);
}
function init() {
video = document.getElementById('sourcevid');
var outputcanvas = document.getElementById('output');
draw = outputcanvas.getContext('2d');
setInterval("processFrame()", 33); // 30 fps
}
![Page 25: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/25.jpg)
video {
position: relative;
border-radius:
200px 50px 200px 50px;
box-shadow:
#244766 10px 10px 10px;
transform: rotate(5deg)
translate(15px,10px);
}
![Page 26: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/26.jpg)
Styling Custom Controls
![Page 27: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/27.jpg)
![Page 28: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/28.jpg)
Custom Skinnable Players Media Element Methods Media Element Events
play(), pause(), load(), canPlayType()
video.addEventListener('play',
function() {
play.title = 'pause';
play.innerHTML = 'ǁ';
}, false);
![Page 29: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/29.jpg)
Custom Controls
![Page 30: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/30.jpg)
Going Full Screen
![Page 31: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/31.jpg)
Going Full Screen
![Page 32: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/32.jpg)
HTML5 Community Players
![Page 33: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/33.jpg)
A Comparison of HTML5 Video PlayersName Licence JavaScript Library
Flash
fallback iOS Full screen Keyboard Subtitles easy to integrate easy to theme
Projekktor GPL 3 jQuery yes yes noish – – yes yes
FlareVideo MIT jQuery yes – yes* play/ pause *** – yes yes
Video JS GPL 3 – yes yes yes – yes yes yes
JW Player custom – yes yes yes – – yes yes
Kaltura / Adobe GPL 2 jQuery yes yes browser window – – yes yes
html5media GPL 3 – yes yes yes* – – yes –
jMediaelement MIT jQuery yes yes with plugin yes yes yes yes
OIPlayer GPL 3 jQuery yes yes browser window – – noish yes
HVideo custom jQuery – yes yes* play/ pause *** – noish yes
jQuery Video ? jQuery – – – – – yes –
Video for
Everybody CC – yes yes yes* – – yes –
Open Video
Player custom jQuery yes yes browser window – – – maybe
HTML5 Video
Player ? MooTools – yes – – – yes yes
mediaelement.js GPLv2 MIT jQuery yes yes yes – yes yes yes
SublimeVideo ** paid service yes yes cmd/ctrl + click – – hell yes –
Uppod.HTML5 ? – includable yes browser window pause *** – yes no
LeanBack own – yes yes yes yes yes yes yes
Mooplay GPL 3 MooTools no yes browser window – yes noish yes
jPlayer MIT and GPL jQuery yes yes - – - yes yes
OSM Player GPL 3 jQuery yes triple click to play browser window – – hell no –
#videosws
![Page 34: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/34.jpg)
A Selection of HTML5 Video PlayersSublime Video – Player as a Service
JW Player
mediaelement.js
LeanBack Player – Keyboard Support
![Page 35: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/35.jpg)
![Page 36: 5 Things You Need to Know to Start Using Video and Audio Today](https://reader034.fdocuments.net/reader034/viewer/2022051816/545d44a0af7959c3098b4a16/html5/thumbnails/36.jpg)