How to realize Video playback by html5

This article mainly shows you "how to realize video playback in html5". the content is simple and easy to understand, and the organization is clear. i hope it can help you solve your doubts. let Xiaobian lead you to study and learn this article "how to realize video playback in html5".

HTML5 technical advantages

1 About video without plug-in playback, click to see

2 Cross-platform, good upgrade, good maintenance, development cost is much lower than native APP

3 Good support for mobile, support for gestures, local storage and video continuation, etc., through H5 you can move your website.

4 cleaner code, better interaction

5 Support for game development

Second, html5 play video

PC or flash playback, but mobile through html5 mode to do.

HTML5 video tags only support mp4, webm, ogg three formats. HTML5 is supported by all major browsers (except Opera).

H.264 has captured 80% of the video market. If mobile application video, it is recommended to compile into 264 format, with good high compression ratio and high image quality.

H.264 is a new digital video coding standard jointly formulated by the Joint Video Group (JVT), which is both H.264 of ITU-T and Part 10 of MPEG-4 Advanced Video Coding (AVC) of ISO/IEC. Therefore, whether MPEG-4 AVC, MPEG-4 Part 10, or ISO/IEC 14496-10, all refer to H.264.

HTML5 Code DEMO

function browserRedirect() {var sUserAgent= navigator.userAgent.toLowerCase();var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";var bIsMidp= sUserAgent.match(/midp/i) == "midp";var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";var bIsAndroid= sUserAgent.match(/android/i) == "android";var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile"; if(bIsAndroid){document.getElementById("a").style.display="block";document.getElementById("b").style.display="none";document.getElementById("c").style.display="none";document.getElementById("d").style.display="none";}else if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM) {document.getElementById("b").style.display="block";document.getElementById("d").style.display="none";document.getElementById("a").style.display="none";document.getElementById("c").style.display="none";} else if(bIsIpad) {document.getElementById("c").style.display="block";document.getElementById("a").style.display="none";document.getElementById("b").style.display="none";document.getElementById("d").style.display="none"; }else {document.getElementById("d").style.display="block";document.getElementById("a").style.display="none";document.getElementById("b").style.display="none";document.getElementById("c").style.display="none"; }}_window.onload=function(){browserRedirect();} $(document).ready( function(){ var ps=new jsPlayer("700","500","myVideo"); } ); Test Mobile device

This is an Android phone.

This is an iPhone.

It's an iPad.

it's a computer

00:00:00

IV. Development of HTML5

Html5 browser support

Most browsers support HTML5 (except Opera Mini)

Source: caniuse.com/#cats=HTML5

mp4 video support

MP4 is supported (except Opera).

The above is "html5 how to achieve video playback" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!