Implement a sample code for a custom HTML5 player from zero

This sharing is a custom video player based on the HTML5 label. Among them, the functions such as playing pause, progress dragging, volume control, and full -screen are implemented.

Click me to view the source code warehouse.

I believe that some children's shoes that have not been exposed to making custom players will stay here for labels.

 <video Controls = Controls Autoplay = Autoplay> <Source SRC = Movie.ogg Type = Video/OGG/> </Video>

The Controls property is set to display a browser's own control bar in the interface. If there is no demand for UI, its built -in controller can already meet most needs. Of course, if so, you won't see this sharing =. =

Then the key to the player that implements a custom function is that we do not use the native controller to hide it. After the same position below, it is used to simulate the required style through HTML and CSS. The interface functions and properties exposed to us, as well as the corresponding simulation UI and video playback data of the user's operating behavior.

 Myvid = document.GetelementByid (video1); // Control video switch myvid.play () // Play myvid.pause () // Simplication // Mtid.currentches = 5; // Back or set the current video. Play location myvid.duration // Return the total length of the video // Simulation video volume myvid.Volume // Volume // After getting the video, it is determined when it is switched from loading to play myvid.readyState // 0 = have_nothing -No about audio/ Whether the video is ready // 1 = have_metadata -about audio/video at metadata // 2 = have_current_data -data about the current playback location is available, but there is no enough data to play the next frame/millisecond // 3 = Have_future_data -The current and at least the next frame of the data is available // 4 = have_enough_data -available data is enough to start playing

In all the key points in implementation, the more tedious is the simulation of the progress bar. Among them, the Currenttime and Duration attributes in the Video label are used to calculate the position of the progress bar relative to the total length through the current playback time and the total playback time. At the same time, the length of the user at the final setting of the user can also be used to reverse the position of the video at this time.

 // Core code sample var dragdis = 0var proceswidth = xxx // Total length of dragging bar ('body'). EFTInit is a dragging strip The distance on the left side of the giant screen on the left side of Dragtarget.css The button rendered at the same location videosource.pause ()}). MouseMove (Function (E) {Movex = E.Clientx Disx = Movex -StartX VAR Left = DRAGDIS + DISX IF (Left> PROCESSWI dth) {left = processwidth} else if ( left <0) {left = 0} dragtarget.css ({left: left}) DRAGPROCESS.CSS ({width: left}).). Source.currenttime = $ ( 'Blue Drag Strip'). Width () /ProcessWidth * Duration // Calculate the correct play position of the video after dragging

The control of the volume is basically the same as the above behavior. Therefore, in the source code, the author judges the volume and progress section through different elements to perform progress or dragging control of volume.

 function ifState() { var state = videoSource.readyState if(state === 4) { //状态为4即可播放videoPlayer() } else { $('.play-sym-wrapper').remove() $ ('BODY'). Append ('<div class = play-sym-wrapper> <IMG class = play-sym src =./images/loading.gif> </div>') // Add loading animation settimeout (i fstate , 10)}} Settimeout (ifState, 10)

The core control part has been finished. Interested students can click on the source code HTML to play. Among them, there are many fragmented needs, such as clicking pause, saving volume, and so on. The basic functions of the entire video player are realized.

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.