Customized implementation of H5 player that can play pause, progress drag, volume control and full screen

This time I will bring you a custom implementation of an H5 player that can play, pause, progress drag, volume control, and full screen. A custom implementation of an H5 player that can play, pause, progress drag, volume control, and full screen. Notes What are the following? Let’s take a look at actual cases.

This sharing is a custom video player based on HTML5 tags. It implements functions such as playback pause, progress dragging, volume control and full screen.

Effect preview

Click here to view the source code warehouse.

Core Idea

I believe that there must be some children's shoes who have never been exposed to making custom players, and their understanding of tags will stop here.

<video controls="controls" autoplay="autoplay">
  <source src="movie.ogg" type="video/ogg" />
</video>

After the controls attribute is set, a control bar that comes with the browser will be displayed in the interface. If there are no requirements for the UI, its built-in controller can already meet most needs. Of course, if that were the case, you wouldn’t see this sharing =. =

Hide the control bar and simulate

The key to implementing a player with custom functions is that we do not use the native controller and hide it , in the same position below, simulate the required style through html and css, and at the same time use js to call the interface functions and properties exposed to us by the vedio tag, and detect the user's operating behavior to synchronously simulate the response of the UI and video playback data Variety.

Usage of several core functions and attributes

myVid=document.getElementById("video1");
//控制视频开关
myVid.play() //播放
myVid.pause() //暂停
//模拟视频进度条
myVid.currentTime=5; //返回或设定当前视频播放位置
myVid.duration // 返回视频总长度
//模拟视频音量
myVid.volume //音量
//获取视频当前状态后判断何时从loading切换为播放
myVid.readyState
//0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
//1 = HAVE_METADATA - 关于音频/视频就绪的元数据
//2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
//3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
//4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

The key point in all implementations is the simulation of the progress bar. The currentTime and duration attributes in the video tag are used. Through the ratio of the current playback time to the total playback time, the position of the progress bar relative to the total length can be calculated. At the same time, the last length set by the user by dragging the progress bar can also be used to reversely calculate the position where the video should be played at this time.

Drag and drop code ideas

//核心代码示例
var dragDis = 0
var processWidth = xxx //拖拽条总长
$('body').mousedown(function(e) {
    startX = e.clientX
    dragDis = startX - leftInit //leftInit为拖拽条起始点巨屏幕左侧的距离
    dragTarget.css({ //拖拽按钮
        left: dragDis
    })
    dragProcess.css({ //进度条(蓝色进度条)
        width: dragDis
    }) // 令进度条和拖拽按钮渲染在同一位置
    videoSource.pause()
}).mousemove(function(e) {
    moveX = e.clientX
    disX = moveX - startX
    var left = dragDis + disX
    if(left > processWidth) {
        left = processWidth
    } else if(left < 0) {
        left = 0
    }
    dragTarget.css({
        left: left
    })
    dragProcess.css({
        width: left
    })
}).mouseup(function(e) {
    videoSource.play()
    videoSource.currentTime = $(&#39;蓝色拖拽条&#39;).width() / processWidth * duration //拖拽后计算视频的正确播放位置
})

Similarly, the volume control is basically the same as the above behavior. Therefore, in the source code, the author judges the volume and progress parts through different elements. Drag and drop control of progress or volume.

Control the loading animation before playback by querying the video stream status

function ifState() {
    var state = videoSource.readyState
    if(state === 4) { //状态为4即可播放
        videoPlayer()
    } else {
        $('.play-sym-wrapper').remove()
        $(&#39;body&#39;).append(&#39;<p class="play-sym-wrapper"><img class="play-sym" src="./images/loading.gif"></p>')
        //添加loading动画
        setTimeout(ifState, 10)
    }
}
setTimeout(ifState, 10)

The core control part has been finished. Interested students can click to play in the html of the source code. , which is forced to have many fragmentary needs, such as clicking to pause, saving volume, etc. The basic functions of the entire video player are fairly well implemented.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to solve the problem that the video tag in H5 cannot play mp4 files

The newly added tags in html5 are Which

The above is the detailed content of Customized implementation of H5 player that can play pause, progress drag, volume control and full screen. For more information, please follow other related articles on the PHP Chinese website!