您的位置:首页 > 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
    您可能感兴趣