Drag and drop and customize the player

Today uses the drag and drop, this is in the H5, drag and drop actually drag is the label, the label as a global variable, you want to drag where you drag to where, we know that the tag of the IMG is the default support drag-and-drop, so do not set the property, but the other to set a property to achieve drag and drop:

Must have draggable=true to be realized.

Drag-and-drop is generally used in conjunction with JS, light listening meaning to know that the drag is the action, it has several registration events:

1: When you start dragging, it is the state of the drag-and-drop:

2: There is an end to the beginning:

The two of them are really good to remember, just a word different, one is start an end, they themselves mean a beginning an end meaning.

The general tag element is not supported by drag and drop, so in the process of dragging, we want to block the default behavior, using one:

This is not to be missed out.

The drag-and-drop process can then be implemented:

Just add the element you want to drag and drop it where you want to drag it. The following style is a property that you set according to your needs.

Requestfullscreen is full-screen meaning, in H5 we can put you want that element of the content set to full screen, but this property compatibility is not too good, generally write prefix, it is very simple to register a click event, a full screen can be, it is not compatible with the main is not good, Note Be sure to write the following code to avoid poor compatibility:

In H5 we used to be the default tag player, in fact, we can also set the player itself,

Here this player is set by itself, it is used to the upper left corner of the video, the other is div,a tags, etc., so that you can achieve flexibility, what you want to make what kind of, here is roughly divided into these parts, the big frame, about two, and then the left is divided into three pieces. A total of four pieces,

The first block on the left: it is a video tag, the path to write the path is possible.

Second block on the left: is a progress bar, <input type= "range" >

Left third fast: is a few control keys, here the control key is made with JS, download the icon from the Internet, and then use the properties of JS and H5 to do:

Start key:

Pause key:

Fullscreen is what it says, just add a click to the event.

The progress bar is a bit cumbersome, here is a video playback event, Ontimeupdata:

1: Get the video playback progress first. The progress is actually a percentage. Because the progress bar value is 0 to 100.

2: The playback progress is then assigned to the value of the progress bar, so multiply by 100

Control the progress bar to control the video playback is actually the above reverse:

1: Divide the current position of the control bar by 100 to calculate the percentage:

2: Find out the current progress of the video:

3: The CurrentTime attribute assigned to video is available:

So the second block of progress bar is finished, and then left to the list, to switch the list, here we write HTML using data-name this way:

Loop all a tags, then get the movie information in the A tag, and set the SRC attribute to video:

The main thing is to take the movie information:

To do this, the framework of our custom player is done, and the player you want is perfected according to the individual requirements.

Drag and drop and customize the player