Share a video player "Go" based on the HTML5 implementation

What is Hivideo?

Recently in the use of PhoneGap to develop an app, the app needs to play a video, I want to use the HTML5 directly, but use it in full-screen playback without support for horizontal playback, can only give up. The final decision is to encapsulate a player yourself, lest you want to extend the functionality later.

Recently fascinated by the word hi, so I named the player named: Hivideo.

Hivideo is a HTML5-based video player that rejects the original playback control bar style of video and rewrites it once. Supports pause, play progress control, sound control, full-screen playback. If you want to use Hivideo on your phone, you also support horizontal playback when you play full screen.

The final results of the Hivideo are as follows:

How do I use Hivideo?

HIVIDEO directory structure:

Assets----Images----hivideo.csshivideo.js

To use Hivideo, you first have to introduce a style HIVIDEO.CSS file in the main interface.

<link rel= "stylesheet" href= "Assets/hivideo.css"/>

Hivideo.js files can be referenced directly on the main page, and also support the COMMONJS, AMD specifications.

Add attributes on the video tag that you want to convert to the Hivideo player:

<video ishivideo= "true" ></video>

Hivideo will automatically convert the above video element to the Hivideo player. We can also set playback properties on the Video tab:

1.autoplay: Auto Play.

2.isrotate: fullscreen playback, if you use Hivideo on the phone side, we can set this property to True, indicating the horizontal screen display when full screen playback.

3.autoHide: Automatically hide the control bar when playing a video.

How to use:

<video ishivideo= "true" autoplay= "true" isrotate= "false" Autohide= "true" >    <source src= "/http Www.html5videoplayer.net/videos/madagascar3.mp4 "type=" Video/mp4 "></video>

If it is a later dynamically added video element, it can also be dynamically loaded via Hivideo. For example, the page dynamically adds a video element with the id "player", which can be converted to a Hivideo player by the following way:

Hivideo (document.getElementById ("Player"));

Online Demo demo:https://heavis.github.io/hivideo/index.html

Open Source Address: Https://github.com/heavis/hivideo

How to hide the browser's player style

Most browsers now support video elements, and the video styles implemented by different browsers vary.

Chrome-implemented player styles:

Firefox-implemented player styles:

The player style implemented by IE:

In order for the player to unify the styles under each browser, the first thing to do is to hide the styles implemented by each browser. But in general we do not see the elements under the player through browser development tools, because these elements are shadow elements that are attached to the video through a document fragment and are not visible to the document flow.
How do I see the shadow elements under my browser? Chrome gives developers the option to open the Developer Tools->settings->general tab, and we can see that elments has an option called "Show User Agent Shadow DOM":

Tick this option and now we can view the playback elements under video with the development tool:

<div pseudo= "-webkit-media-controls" > element is the control bar of the container, we just set its display to none can hide the control bar, but also need to be compatible with each browser:

Video[ishivideo= "true"]::-webkit-media-controls{display:none!important;} Video[ishivideo= "true"]::-moz-media-controls{display:none!important;} Video[ishivideo= "true"]::-o-media-controls{display:none!important;} Video[ishivideo= "true"]::media-controls{display:none!important;}

Here I encounter a puzzling problem, the above style by merging the way to write is not valid, the following writing cannot hide the shadow element:

Video[ishivideo= "true"]::-webkit-media-controls,video[ishivideo= "true"]::-moz-media-controls,video[ishivideo= " True "]::-o-media-controls,video[ishivideo=" true "]::media-controls{    display:none!important;}

After hiding the browser shadow elements, you can start to implement your own control bar. Before implementation, we need to understand the API provided by video.

Common APIs for players

The API names provided by each browser operation player are typically prefixed with the vendor, and all of the basic API functions correspond to multiple versions, and compatibility is a concern.

1. Full-screen Event

["Fullscreenchange", "Webkitfullscreenchange", "Mozfullscreenchange", "Msfullscreenchange"].forEach (function ( EventType) {    Document.addeventlistener (EventType, function (event) {    })});

If the player's full-screen state changes, the above event will be triggered. The above event we only know the full-screen status changes, but do not know whether to go to full screen or exit full screen. You also need to combine full-screen status APIs.

2. Is the current full-screen state

Hivideo.prototype.isFullScreen = function () {    return document.fullscreenelement | |        document.webkitfullscreenelement | |        document.mozfullscreenelement | |         Document.msfullscreenelement;};

Above is the function of the Hivideo package to determine whether the full screen.

3. Go to Full Screen mode

if (video.requestfullscreen) {    video.requestfullscreen ();} else if (Video.webkitrequestfullscreen) {    Video.webkitrequestfullscreen ();} else if (video.mozrequestfullscreen) {    video.mozrequestfullscreen ();} else if (Video.msrequestfullscreen) {    Video.msrequestfullscreen ();}

4. Exit Full Screen mode

if (document.exitfullscreen) {    document.exitfullscreen ();} else if (Document.webkitexitfullscreen) {    Document.webkitexitfullscreen ();} else if (document.mozcancelfullscreen) {    document.mozcancelfullscreen ();} else if (Document.msexitfullscreen) {    Document.msexitfullscreen ();}

5. Playback status

Video.paused:true indicates that it is not playing, and false indicates that it is playing.

6. Play the video

Video.play ()

7. Pause Playback
Video.pause ()

8. Whether Mute
Video.muted = True, mute
Video.muted = False, not muted

9. Sound Control

Sets the Video.volume control sound, the range of values 0 to 100.

10. Current Playback time
Video.currenttime, readable and writable, the unit is wonderful. The playback progress can be displayed by <input type= ' range ' > value.

11. Total Video Cycle
Video.duration, the unit is wonderful.

12. Play Time Update event

Video.addeventlistener ("Timeupdate", function () {});

13. Video Metadata loading Complete event

The total video duration is always displayed when the video is played, and the metadata is loaded when the Loadedmetadata event is triggered, so you can set the total time display in the event.

Video.addeventlistener ("Loadedmetadata", function () {}

14. Video Playback End Event

Video.addeventlistener ("Ended", function () {}

With the API listed above, it is easier to implement a custom player and call the corresponding API at the corresponding location in the process of implementing the player itself.

How to achieve horizontal screen playback

The principle is simple, in the full screen when the player container is stained with the entire screen, we can add a custom style to the container, so that the container rotates 90 degrees.

. rotate90{    -webkit-transform:rotate (90deg);    -moz-transform:rotate (90deg);    -ms-transform:rotate (90deg);    -o-transform:rotate (90deg);    Transform:rotate (90deg);}

The width and height of the rotated container must also be adjusted to screen.height the height of the screen to the width of the container, while the height of the container is set to the width of the screen. This results in full-screen playback. Here is the full code for full-screen playback control:

Hivideo.prototype.bindFullEvent = function () {var = this;    var origwidth = origheight = 0; ["Fullscreenchange", "Webkitfullscreenchange", "Mozfullscreenchange", "Msfullscreenchange"].forEach (function (        EventType) {var curfullhivideoid = null; Document.addeventlistener (EventType, function (event) {if (curfullhivideoid = Document.body.getAttribute ("Curfullhi        Video ")) && curfullhivideoid!== self.videoid_) {return;        } var isrotate = self.options.isrotate;            if (Self.isfullscreen ()) {var cltheight = isrotate? window.screen.width:window.screen.height; var cltwidth = isrotate?            Window.screen.height:window.screen.width;  if (isrotate &&!hivideo.hasclass (self.videoparent, "Rotate90")) {Hivideo.addclass (self.videoparent,            "Rotate90");            } self.videoParent.style.height = cltheight + "px";      Self.videoParent.style.width = cltwidth + "px";  }else{if (isrotate) Self.videoParent.className = Self.videoParent.className.replace ("Rotate90", ""). Trim ();                Self.videoParent.style.height = origheight + "px";            Self.videoParent.style.width = origwidth + "px";        }            })        }); SELF.FULLBTN && self.fullBtn.addEventListener ("click", Function () {if (!self.isfullscreen ()) {doc            Ument.body.setAttribute ("Curfullhivideo", self.videoid_);            Origwidth = Self.videoParent.offsetWidth;            Origheight = Self.videoParent.offsetHeight;            Go full-screen if (self.videoParent.requestFullscreen) {self.videoParent.requestFullscreen ();            } else if (Self.videoParent.webkitRequestFullscreen) {self.videoParent.webkitRequestFullscreen ();            } else if (Self.videoParent.mozRequestFullScreen) {self.videoParent.mozRequestFullScreen (); } else if (self.videoParent.msRequEstfullscreen) {self.videoParent.msRequestFullscreen ();        } self.exchangebtnstatus (this, false);            }else{//Exit Full-screen if (document.exitfullscreen) {document.exitfullscreen ();            } else if (Document.webkitexitfullscreen) {document.webkitexitfullscreen ();            } else if (Document.mozcancelfullscreen) {document.mozcancelfullscreen ();            } else if (Document.msexitfullscreen) {document.msexitfullscreen ();        } self.exchangebtnstatus (this, true);    }    }); return self;};

Supports COMMONJS, AMD specifications

1.CommonJS Support

(function (global, factory) {    "use strict";    Support for COMMONJS specification    if (typeof module = = = "Object" && typeof module.exports = = = "Object") {        module.exports = Factory (global);    } else{        Factory (global);    }} (typeof window!== "undefined"? window:this, Function (window)}

2.AMD Support

Supports AMD Spec if (typeof define = = = "function" && define.amd) {    define ("Hivideo", [], function () {        return Hivideo;    })}

Share a video player "Go" based on the HTML5 implementation