Some of the demand is that the video automatically full-screen playback, which is the default on the iphone. But on the Android system you need to manually click the Full-screen button. Now the full screen API for the video label has been in the draft phase, and the APIs for each browser are different. Fortunately, most of the mobile browser kernel is now WebKit. So you can use the browser's Full-screen API to achieve full screen of the video, of course, the browser's full screen API is not limited to the videos tag. The PC-side processing video can be used with a more mature plug-in videojs. So this time the code is only for the mobile end. Using some code from the Internet, I've streamlined some of the code that the mobile end won't use. And added three events such as "AutoPlay after full screen", "Pause after exiting full screen", and "automatically exit Full-screen after playback". 3 Android phones are currently tested, one of which is "AutoPlay after full screen" does not support. For the convenience of the PC Test temporarily commented out the system's judgment. It can be released at the time of use.
| The code is as follows | Copy Code |
| <! DOCTYPE html> <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no,minimal-ui "> <meta charset= "UTF-8" > <title>Document</title> <style type= "Text/css" > *{ padding:0; margin:0; } video{ Display:block; margin:0 Auto; max-width:100%; } </style> <body> <video id= "video" src= "Oceans.mp4" controls></video> <script type= "Text/javascript" > var fullscreen = function (elem) { var prefix = ' WebKit '; if (Elem[prefix + ' Enterfullscreen ']) { return prefix + ' enterfullscreen '; else if (elem[prefix + ' Requestfullscreen ']) { return prefix + ' requestfullscreen '; }; return false; }; function Autofullscrenn (v) { var ua = Navigator.userAgent.toLowerCase (); var android = String (Ua.match (/android/i)) = = "Android"; if (! Android) return;//non-Android system is not used; var video = V,doc = document; var fullscreenvideo = fullscreen (doc.createelement ("video")); if (!fullscreen) { Alert ("Do not support Full-screen mode"); Return } Video.addeventlistener ("Webkitfullscreenchange", function (e) { if (!doc.webkitisfullscreen) {//Exit full screen Pause video This.pause (); }; }, False); Video.addeventlistener ("click", Function () { This.play (); Video[fullscreenvideo] (); }, False); Video.addeventlistener (' Ended ', function () { Doc.webkitcancelfullscreen (); Auto exit full screen after playback },false); }; var v = document.getElementById (' video '); Autofullscrenn (v); </script> </body> |
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
