1 About the video without plug -in, click to watch
2 Cross -platform, easy upgrade, good maintenance, development cost is much lower than that of native APP
3 For good support, support gestures, local storage and video continuity, etc., you can move your website through H5.
4 more concise code, better interaction
5 Support game development
2. HTML5 Play VideoThe PC side is still played in Flash, but the mobile terminal is done by HTML5.
The HTML5 Video tag only supports three formats: MP4, Webm, and OGG. At present, all the latest version of all mainstream browsers support HTML5 (except Opera)
H.264 has occupied 80%of the video market. If mobile application video is recommended to compile into 264 formats, there is a good high compression ratio and high -quality quality.
H.264 is a new digital video coding standard jointly formulated by the two organizations jointly established. Part 10 of Advanced Video Coding (AVC). Therefore, whether it is MPEG-4 AVC, MPEG-4 part 10, or ISO/IEC 14496-10, it refers to H.264.
3. HTML5 code DEMO<! Doctype html> <html> <meta http-equiv = content-type content = Text/html; charSet = UTF-8> <Script src = javascript/jquery-1.7.min.js> </sc Ript> < script src = javascript/jsplayer.js> </script> <script src = javascript/dtooltip-min.js> </script> <link href = css/playcss? Var = s Tylesheet Type = Text/CSS > <Script Type = Text/Javascript> Function BrowSerredirect () {var snignt = navigator.userages.tolowercase (); VAR BISIPAD = SUSERAGENT.MATCH d/i) == iPad;; var bisiphoneos = suserages.match (/iPhone OS/i) == iPhone OS; var bismidp = suserages.match (/midp/i) == midp; var bisuc7 = suseragent.match (/Rv:1.2.3.4/i) == RV: 1.2.3.4; VAR bisuc = suserages.match (/ucweb/i) == ucweb; var bisandroid = suseragragent.match (/Android/i) == Android; VAR BISCE = SUSERAGENT.MATCH (/Windows CE /i) == Windows CE; VAR biswm = suserages.match (/windows Mobile/I) == Windows Mobile; if (bisandroid) {document.getElementbyid (a) .style.display = block; MENTBYID (b) .style.display = None; Document. GetelementByid (C) .style.display = None; Document.GetelementByid (D) .style.display = None; CE || biswm) {document.GetelementByid ( b) .style.display = block; documen.get.GetelementByid (d) .style.display = Non E; Document.getElementbyid (A) .style.display = None; yid (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; documen.GetelementByid (a) .style.display = None; TelementByid (b) .style.display = None; Document .GetelementByid (C) .style.display = None;}} Window.onload = Function () {browserredirect ();} $ (document) .Ready () ER (700,500, myvideo);} );/Script> <head> <Title> Test mobile terminals </Title> </Head> <body> <div ID = a> <p> This is Android phone </p> </div> <div ID = B> <p> This is Apple mobile phone </p> </div> <div id = c> <p> This is iPad </p> </div> <div ID = d> <p> This is a computer. </p> </div> <div style = width: 700px; margin: auto;> <!-The player code begins-> <div class = playcontent> <div class = playScreen> <video ID = Myvideo> <Source src = Movie/Th264.mp4 Type = Video/MP4> </Video> </DIV> <DIV Class = ProLines> <DIV ID = Origin class = Arial> 00:00 </div> <div class = Line> <div class = iSplayLine> <div class = CurrenTcircle> </DIV> </DIV> </div> <div id = duration class = Arial> </div> </div> <div class = playbar S> <div class=prevBar><img src=Images/prev.jpg border=0 id=prev></div> <div class=startBar><img src=Images/stop.jpg border=0 id=imgStatus></ div> <div class = nextBar> <IMG SRC = Images/Next.jpg Border = 0 ID = NEXT> </DIV> <DIV Class = VoiceContent> <Div class = Voice> <IMG SRC = Images/V OICE.JPG ID = Voiceimg Border = 0> </DIV> <DIV Class = VoiceLine> <DIV Class = Voicekuai> </DIV> </DIV> </DIV> <!-- The player code end -> </div> </body> </html>
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.