+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
5 Things You Need to Know to Start Using Video and Audio Today
1.
2.
3.
4. <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>
5.
6.
7.
8. !
! *
*
Chrome is removing support for H.264
* If WebM is installed ! Microsoft released a H.264 Extension for Chrome on Windows 7
12. <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
20. Baseline * High
Larger file Main Smaller File
Less CPU to Decode More CPU to Decode
Quick to Encode Longer to Encode
baseline profile must be main profile compatible to support DirectX Video Acceleration
24. Drawing with Canvas
Hide the Video display a 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 init() {
video = document.getElementById('sourcevid');
var outputcanvas = document.getElementById('output');
draw = outputcanvas.getContext('2d');
setInterval("processFrame()", 33); // 30 fps
}
30 times per second draw the cropped video onto canvas
function processFrame() {
// manipulate image here cropping and scaling as needed
draw.drawImage(video, cX, cY, w, h, 0, 0, w, h);
}