Use HTML5 in the video to customize the player prerequisite Knowledge point Summary and JS full-screen API introduction

One, the video JS knowledge Points:

Controls (Controller), AutoPlay (AutoPlay), loop (loop) ==video default;

Customize the recording of the methods and properties provided in the player in some JS:

1, Play () control the playback of video

2, pause () control the video stop

3, CurrentTime control the current time of the video

4. Muted controls whether the video is muted (assigned true or FALSE)

5, Volume control the size of the volume (assigned value 0-1)

6. Total time of Duration video

7. Ontimeupdate event (executes when the current playback position changes, bind AddEventListener when used)

8, Requestfullscreen full screen

Second, full-screen API introduction

A brief history of browser full screen API

1. The first browser-native full-screen API is the Webkitenterfullscreen () function added in Safari 5.0 (and iOS), but it can only be in the controls of the <video> tab of Safar.

2. In Safari 5.1, Apple updated the API to bring it closer to Mozilla's full-screen API (which is actually earlier than Apple's implementation), and now all DOM elements can call Webkitrequestfullscreen () function allows the HTML page to enter full-screen mode.

3, Firefox and Chome announced that they will add native full-screen API support, and this feature has been implemented in Chome 15+ and firefox10+, the Mozilla team has released some.

4. On October 15, 2011, the group published a full-screen API draft (written by a member of the opera team), which has two major differences from Mozilla's draft:

1. Mozilla/webkit Use capital letter ' S ' (fullscreen), but the fullscreen is not
2. Mozilla/webkit using CANCELFULLSCREEN,W3C with Exitfullscreen

5, Update (11/15/2011): Ted Johnson from IEBlog says IE10 will not support full-screen API (12/05/2011: I misunderstood the first email from Ted) IE10 's development team has yet to decide whether to implement full-screen APIs. However, he points out: Win8 's Metro-style Internet Explorer is always full-screen, and as before, press F11 to enter full-screen mode.

Browser Full Screen API

To enter full-screen mode, you can call the Requestfullscreen (or Requestfullscreen) method that needs to enter the full-screen element. To exit full screen, call the Cancelfullscreen (or Exitfullscreen) method of the Document object.

Code:

Fullscreen

var Docelm = document.documentelement;
W3c
if (Docelm.requestfullscreen) {

Docelm.requestfullscreen ();

}
FireFox
else if (Docelm.mozrequestfullscreen) {

Docelm.mozrequestfullscreen ();

}
Chrome and more
else if (Docelm.webkitrequestfullscreen) {

Docelm.webkitrequestfullscreen ();

}
IE11
else if (Elem.msrequestfullscreen) {

Elem.msrequestfullscreen ();

}

Exit Full Screen

if (Document.exitfullscreen) {

Document.exitfullscreen ();

}

else if (Document.mozcancelfullscreen) {

Document.mozcancelfullscreen ();

}

else if (Document.webkitcancelfullscreen) {

Document.webkitcancelfullscreen ();

}

else if (Document.msexitfullscreen) {

Document.msexitfullscreen ();

}

Monitor whether full screen

Document.addeventlistener ("Fullscreenchange", function () {

fullscreenstate.innerhtml = (document.fullscreen)? "": "Not";}, False);

Document.addeventlistener ("Mozfullscreenchange", function () {

fullscreenstate.innerhtml = (document.mozfullscreen)? "": "Not";}, False);

Document.addeventlistener ("Webkitfullscreenchange", function () {

fullscreenstate.innerhtml = (document.webkitisfullscreen)? "": "Not";}, False);

Document.addeventlistener ("Msfullscreenchange", function () {

fullscreenstate.innerhtml = (document.msfullscreenelement)? "": "Not";}, False);

Fullscreen Yes style settings

Html:-moz-full-screen {
background:red;
}
Html:-webkit-full-screen {
background:red;
}
Html:fullscreen {
background:red;
}

Use HTML5 in the video to customize the player prerequisite Knowledge point Summary and JS full-screen API introduction