Basic ideas and codes for implementing video players in browsers

Preface

Customize a player, all components are native, so it's a bit ugly, focus on the business logic.

The interface probably looks like the following.

You can look at the interface and think in your mind how you would implement this video player. Here are some questions to ask yourself:

• This component will accept those props
• How to obtain basic information about a video, including duration, resolution, etc.
• How to pause and play
• How to implement the logic of dragging the progress bar
• How to handle the initial loading of the video?
• How to deal with the loading screen when the video is stuck during playback

Summary of audio and video knowledge in browsers

Video Encoding

A video is actually a series of pictures played continuously. If 24 pictures are played in 1 second, the frame rate of the video is 24.

If the size of the video is 1920*1080, that is, the size of a picture is 1920*1080*3 bytes, multiplied by 3 because one pixel has 3 bits, which store rbg respectively. Then the storage space required for a 30-minute video is as follows:

//The storage space required for 1s video is:
1920*1080*3*24 bytes
//Storage space required for 30min video:
1920*1080*3*24 * 60*30=250.28GB

As you can see, it is very large, so the video needs to be compressed, hence the concept of codec. The video encoding format can be understood as a compression format. Different encoding formats have different compression rates. Common encoding formats include h264, mpeg4, vp8, etc.

In addition, one thing that needs to be noted is that because the encoding format has copyright issues, different browsers support different encoding formats, so some videos in some encoding formats cannot be played in some browsers, or there is only sound but no picture.

Our front-end developers only need to remember one thing, that the video encoding format supported by mainstream browsers is h264 .

Packaging format

A video file contains video streams and audio streams, as well as some metadata, such as resolution information, title, etc. The format of this file is called the encapsulation format, which can be understood as the packaging format. Common mp4, webp, mov, mpeg, etc. are all encapsulation formats.

The encapsulation format is often unrelated to the video encoding. For an mp4 file, the video stream encoding can be h264 or mpeg, so there will be a problem that some browsers can play the same mp4 file while others cannot.

Audio and Video Tags

<video controls poster="1.jpg" src="1.mp4" loop muted></video>
<audio controls src="1.mp3"></audio>

src specifies the resource address, poster specifies a cover image for the video, and controls indicates that the browser should display UI controls (different styles for each browser)

Common properties

The following are the common properties of video and audio

Common events

Common events for video and audio

Common methods

• play() controls the video to start playing
• pause() controls the video to pause playback

With the above properties, events and methods, we can do a lot of things, such as customizing the player, using the player to preview the video locally, etc.

The overall idea is as follows

1. This component receives a video src as a parameter
2. Listen to the onLoadedMetadata event to get the video duration (duration), real width and height (videoWidth, videoHeight)
3. When you click play/pause, call the play/pause method of the video element
4. During playback, listen to onTimeUpdate, obtain the current playback time (currentTime), and calculate the progress of the progress bar
5. Drag the progress bar to set the current video playback time, which is the opposite of step 4.
6. When the video is initially loaded, "loading" is displayed. That is, when the component is first rendered, the loading attribute defaults to true, which shows the loading effect. When the video metadata is loaded, the loading is canceled.
7. When the video freezes, it displays “loading”. This function is implemented by monitoring the onWaiting event. When there is no lag, cancel loading and monitor the onCanPlay event.

Code Implementation

The code is implemented using React, and it is the same with Vue. Just focus on the business logic. If you need it, I can update this article and add Vue code.

Note: DOM native events in react need to be preceded by an on and written in camel case.

function formatDuration(duration) {
    var sec_num = parseInt(duration, 10); // don't forget the second param
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours < 10) {hours = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    return hours+':'+minutes+':'+seconds;
}

import React, { createRef, useState } from 'react'
import './VideoPlayer.css'
function VideoPlayer({src}){
    const videoDom = createRef()
    // Current video playback time const [curTime,setCurTime]=useState(0)
    // Video duration const [duration,setDuration]=useState(0)
    // Video status, whether to pause const [isPause,setPause]=useState(true)
    // The real size of the video const [size,setSize]=useState({width:1920,height:1080})
    // Video loading const [waiting,setWaiting]=useState(true)

    // Video metadata loaded successfully const onLoad=(e)=>{
        const {duration,videoWidth,videoHeight}=e.target
        setDuration(duration)
        setSize({width:videoWidth,height:videoHeight})
        setWaiting(false)
    }
    // Control playback pause const handlePlay=(play)=>{
        const v = videoDom.current
        if(play){
            setPause(false)
            v.play()
        }else{
            setPause(true)
            v.pause()
        }

    }
    // Change the video currentTime when dragging the slider
    const onSliderChange=(e)=>{
        setCurTime(e.target.value)
        videoDom.current.currentTime=e.target.value

    }
    // Listen for video timeupdate
    const onTimeUpdate=()=>{
        const v = videoDom.current
        setCurTime(v.currentTime)
        if(v.ended){
            handlePlay(false)
            v.currentTime=0
        }
    }
    //When stuck, display the loading prompt const onWaiting=()=>{
        setWaiting(true)
    }
    // When the video can be played, hide the loading prompt const onCanPlay=()=>{
        setWaiting(false)
    }
    return <div className="video-wrapper">
            <video ref={videoDom} src={src} onLoadedMetadata={onLoad} onTimeUpdate={onTimeUpdate} onWaiting={onWaiting} onCanPlay={onCanPlay} ></video>
            {/* Display loading when the video is loading */}
            {waiting && <div className="waiting">loading...</div>}
            <div className="video-controls">
                {/* Play button */}
                {isPause? <button onClick={()=>{handlePlay(true)}}>Play</button>: <button onClick={()=>{handlePlay(false)}}>Pause</button>}
                {/* progress bar */}
                <input type="range" min="0" max={duration} value={curTime} onChange={onSliderChange}/>
                {/* Time information and resolution information*/}
                {formatDuration(curTime)}/{formatDuration(duration)}
                <span>Resolution: {size.width}x{size.height}</span>
            </div>
        </div>
}
export default VideoPlayer

I wrote a little bit of style, VideoPlayer.css

.video-wrapper{
    width:800px;
}
.video-wrapper>video{
    width: 100%;
}

.video-controls{
    margin-top: 20px;
}

The focus of this article is not on React. React is just a carrier. The same logic can be easily implemented with Vue. The focus is on customizing the logic of a video player.

Summarize

This concludes this article about the basic ideas and codes for implementing video players in browsers. For more information about implementing video players in browsers, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!