Html5 video playback solution, html5 video playback

Html5 video playback solution, html5 video playback

Html5 is mysterious before learning it. I recently learned and studied some html5 achievements. I would like to share my summary with you.
As we all know, application development is divided into two types: native app and web app, that is, the application accessed through a browser.
Html5 has its unique application in the mobile Internet era. Although it has many advantages, it cannot completely replace native apps. Although the development cost of native apps is high, however, its good user experience, API, and existing development ecosystem will maintain its long-term strong coexistence of the two apps. The cost of learning html5 is not high. H5 is essentially html. Anyone who has worked as a web developer can learn it with a little learning.

The main research here is to use html5 to solve the problem of video playback. Adobe ignores the mobile Internet because of its strategic mistake. Mobile Terminals do not support flash, especially apple terminals do not support flash (Apple computers and laptops support flash ). Flash for most pc applications,
Streaming media has a good interactive experience. In order to enable playback and display on mobile terminals, we have studied html5 in depth and used html5 to directly play videos without plug-ins. It can also be played across platforms.

I. html5 technical advantages
1. You can view the video without using a plug-in.
2. cross-platform, well-upgraded, well-maintained, and low development costs compared with native apps
3. good support for mobile apps, support for gestures, local storage and video play-on. You can use H5 to move your website.
4. Simpler code and better interaction
5. Support Game Development


Ii. html5 video playback
The pc end still uses flash for playback, but the mobile end uses html5 for playback.
Html5 video tags only support mp4, webm, and ogg formats. Currently, all mainstream browsers support html5 (except Opera) in the latest version)

H.264 has occupied 264 of the video market. For mobile app videos, we recommend that you compile them into the 264 format with a high compression ratio and high image quality.
H. 264 is a new digital video coding standard jointly developed by the Joint Video group (JVT) formed by the two organizations, it is not only the ITU-T H. 264, Which is part 2 of Advanced Video Coding (AVC), an MPEG-4 of ISO/IEC. Therefore, whether it is MPEG-4 AVC, MPEG-4 Part 10, or ISO/IEC 14496-10, all refer to H.264.

Iii. html5 code DEMO

<! Doctype html> <meta http-equiv = Content-Type content = "text/html; charset = UTF-8 "> <script src =" JavaScript/jquery-1.7.2.min.js "> </script> <script src =" JavaScript/jsPlayer. js "> </script> <script src =" JavaScript/dtooltip-min.js "> </script> <link href =" CSS/play.css? Var = 1121 "rel =" stylesheet "type =" text/css "> <script type =" text/javascript "> 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 (""). 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 (""). style. display = "none"; document. getElementById ("c "). style. display = "none";} else if (bIsIpad) {document. getElementById ("c "). style. display = "block"; document. getElementById (""). styl E. display = "none"; document. getElementById ("B "). style. display = "none"; document. getElementById ("d "). style. display = "none";} else {document. getElementById ("d "). style. display = "block"; document. getElementById (""). style. display = "none"; document. getElementById ("B "). style. display = "none"; document. getElementById ("c "). style. display = "none" ;}} window. onload = function () {browserRedirect () ;}$ (document ). ready (functio N () {var ps = new jsPlayer ("700", "500", "myVideo ");}); </script> 
Iv. html5 Development 
Html5 browser support
Most browsers support html5 (except opera mini)
Data source: http://caniuse.com/#cats=HTML5

Mp4 video support
Mainstream support for mp4 (except for opera)
Data source: http://caniuse.com/#feat=video