您的位置：首页 > Web前端 > > 正文

如何替换html5视频播放器（HTML5自定义视频播放器源码）

更多时间：2021-10-09 00:01:51 类别：Web前端浏览量：1810

如何替换html5视频播放器

HTML5自定义视频播放器源码

video对象

兼容性写法

    <video controls>
        <source src="data/demo.ovg">
        <source src="data/demo.mp4">
        <source src="data/demo.webm">
        您的浏览器不支持，请升级您的浏览器
    </video>

video 标签 width height autoplay muted

poster带有预览图（海报图片）的视频播放器

<video src='data/demo.mp4' muted controls autoplay height='400' width="200" poster='data/poster.jpg" alt="如何替换html5视频播放器（HTML5自定义视频播放器源码）" border="0" />

选中video标签

    var VideoNode = document.getElementById('myVideo');

src控制视频的来源

VideoNode.src = 'data/demo.ogv';

手动设置控件 controls

VideoNode.controls = true;

设置视频音量

VideoNode.volume = 0.5;

currentTime当前播放时间

快进效果

gogogo.onclick = function(){
            VideoNode.currentTime = VideoNode.currentTime + 3;
        };

暂停 pause()

      stopNode.onclick = function(){
            VideoNode.pause();
        };

播放play()

     playNode.onclick = function(){
            VideoNode.play();
        };

load 刷新播放器的事件

      reloadNode.onclick = function(){
            VideoNode.src = 'data/demo.mp4';
            VideoNode.load();
        };

canplay 视频已经加载好可以开始播放了

 VideoNode.addEventListener('canplay',function(){
            console.log('视频已经加载好 可以开始播放了');
        });

requestFullscreen 让video标签变成全屏

VideoNode.webkitRequestFullscreen();
VideoNode.mozRequestFullScreen();

        fullScreenNode.onclick = function(){
            if(VideoNode.webkitRequestFullscreen){
                VideoNode.webkitRequestFullscreen();
            }
            else if(VideoNode.mozRequestFullScreen){
                VideoNode.mozRequestFullScreen();
            }
        };

volumechange 当音量更改时

    VideoNode.onvolumechange = function(){
            console.log('volumechange');
        };

声音随机更改

        volumeNode.onclick = function(){
            VideoNode.volume = Math.random();
        };

seeking 当用户开始拖动进度条时就会触发的事件

 var seekingNum = 0;
        VideoNode.onseeking = function(){
            console.log('seeking...');
            seekingNum++;
            seeking.innerHTML = seekingNum;
        };

seeked 当用户对视频的进度条并且已经完成操作时会触发的事件

   var seekedNum = 0;
        VideoNode.onseeked = function(){
            console.log('seeked...');
            seekedNum++;
            seeked.innerHTML = seekedNum;
        };

timeupdate监听视频播放的状态

       VideoNode.addEventListener('timeupdate',function(){
            // 总时长，以分钟：秒的形式显示
            let allTime = parseInt(VideoNode.duration/60)+':'+parseInt(VideoNode.duration%60);
            // 当前时间，以分钟：秒的形式显示
            let nowTime = parseInt(VideoNode.currentTime/60)+':'+parseInt(VideoNode.currentTime%60);
            timeNode.innerHTML = nowTime+'/'+allTime;
        })

readyState 视频的准备信息

  console.log(VideoNode.readyState);
        setTimeout(function(){
            console.log(VideoNode.readyState);
        },500);

playbackRate 查看或设置视频的一个播放速度

 console.log(VideoNode.playbackRate)

Rate设置倍速

//Rate设置0.5倍速
        RateNode.children[0].onclick = function(){
            VideoNode.playbackRate = 0.5;
        };
        //Rate设置1倍速
        RateNode.children[1].onclick = function(){
            VideoNode.playbackRate = 1;
        };
        //Rate设置2倍速
        RateNode.children[2].onclick = function(){
            VideoNode.playbackRate = 2;
        };

loop的设置

 loopNode.onclick = function(){
            if(VideoNode.loop == false){
                this.innerHTML = '循环';
                VideoNode.loop = true;
            }
            else{
                this.innerHTML = '不循环';
                VideoNode.loop = false;
            }
        };

src返回的数据

console.log('src='+VideoNode.src);

currentSrc返回的数据

console.log('currentSrc='+VideoNode.currentSrc);

监听ended事件

VideoNode.addEventListener('ended',function(){
            console.log('视频播放结束了');
            VideoNode.play();
        })

查看视频的网络状态

console.log(VideoNode.networkState)

手动设置控件 controls

VideoNode.controls = true;

手动设置静音 muted

VideoNode.muted = true;

自定义视频播放器

如何替换html5视频播放器（HTML5自定义视频播放器源码）

放图

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;} 
.outerNode{width: 540px;height: 332px;position: absolute;left: 50%;top: 50%;margin: -166px 0 0 -270px;box-shadow: 0 0 4px #5b606d;}  
.outerNode .videoNode{
    width: 540px;height: 305px;float: left;
    background: black;
}     
.outerNode .controlsNode{
    width: 540px;height: 27px;float: left;background: url(images/ctrs_bg.jpg" alt="如何替换html5视频播放器（HTML5自定义视频播放器源码）" border="0" />

总结

以上所述是小编给大家介绍的HTML5自定义视频播放器源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

标签：视频 HTML5

上一篇：python中test函数用法（Python TestCase中的断言方法介绍）

下一篇：vue 为什么使用虚拟dom（Vue虚拟Dom到真实Dom的转换）

您可能感兴趣

如何替换html5视频播放器（HTML5自定义视频播放器源码）

如何替换html5视频播放器

热门推荐

排行榜