html5视频播放代码,html5视频播放代码

将乐信息网 http://www.jianglexinxi.cn 2020-09-26 09:01 出处:网络
html5视频播放代码,html5视频播放代码,HTML5视频(自定义视频播放器源码) Chrome浏览器支持webm格式

html5视频播放代码,html5视频播放代码,HTML5视频(自定义视频播放器源码)

Chrome浏览器支持webm格式

ie8以及以下不支持video标签 , ie9支持video标签 ,但是支持mp4格式的

Firefox(火狐浏览器)支持ogv格式的视频

 

兼容性写法

 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' /video 

选中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.gif) repeat-x;
.outerNode .controlsNode .playNode{
 float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
 background: url(images/playNode.png) no-repeat;cursor: pointer;
.outerNode .controlsNode .pauseNode{
 float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
 background: url(images/pause.png) no-repeat;cursor: pointer;

本文标题:html5视频播放代码,html5视频播放代码
http://www.jianglexinxi.cn/yanergaozhi/488768.html

0

精彩评论

暂无评论...
验证码 换一张
取 消