您现在的位置是：网站首页> 编程资料编程资料

HTML5自定义视频播放器源码html5视频媒体标签video的使用方法及完整参数说明详解Html5实现首页动态视频背景的示例代码HTML5实现视频弹幕功能HTML5 视频播放(video),JavaScript控制视频的实例代码HTML5视频播放插件 video.js介绍

2023-10-12 295人已围观

简介 这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

video对象

兼容性写法

video 标签 width height autoplay muted

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

选中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;

自定义视频播放器

放图

00:00 - 4:30