HTML5视频(自定义视频播放器源码)
video对象
兼容情况:
safari浏览器不支持webm格式
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;
自定义视频播放器
放图
<!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; }.outerNode .controlsNode .loadNode{width: 267px;height: 10px;margin: 9px 0 0 14px;float: left;background: url(images/load_bg.png) repeat-x;position: relative;} .outerNode .controlsNode .loadNode .lineNode{width: 0%;height: 7px;position: absolute;left: 0;top: 1px;background: url(images/line_bg.png) repeat-x;} .outerNode .controlsNode .loadNode .lineNode .lineRight{width: 2px;height: 100%;position: absolute;right: 0;top: 0;background: url(images/line_r_bg.png) no-repeat; }.outerNode .controlsNode .loadNode .loadLeft{height: 100%;width:3px ;position: absolute;left: 0;top: 0;background: url(images/left_bg.png) no-repeat;z-index: 4; } .outerNode .controlsNode .loadNode .loadRight{height: 100%;width:3px ;position: absolute;right: 0;top: 0;background: url(images/right_bg.png) no-repeat; } .outerNode .controlsNode .loadNode .crlNode{width: 17px;height: 17px;background: url(images/crl_bg.png);position: absolute;left: -8.5px;top: -3.5px;cursor: pointer;z-index: 5;}.outerNode .controlsNode .timeNode{float: left;width: 75px;height: 10px;margin: 9px 0 0 9px; } .outerNode .controlsNode .timeNode span{font-size:10px;float: left;line-height: 10px;color: white; } .outerNode .controlsNode .volumeNode{width: 17px;height: 16px;float: left;margin: 5px 0 0 6px;background: url(images/volume_bg.png); } .outerNode .controlsNode .volumeLine{height: 8px;width: 61px;float: left;margin: 10px 0 0 4px;background: url(images/volumeLine_bg.png) repeat-x;position: relative; } .outerNode .controlsNode .volumeLine .v_left{width: 3px;height:100%;position: absolute;left: 0;top: 0;background: url(images/v_left.png) no-repeat; } .outerNode .controlsNode .volumeLine .v_right{width: 3px;height:100%;position: absolute;right: 0;top: 0;background: url(images/v_right.png) no-repeat; } .outerNode .controlsNode .volumeLine .v_DragNode{width: 15px;height: 13px;position: absolute;left: 58.5px;top: -3.5px;background: url(images/vo_d.png) no-repeat;cursor: pointer;} .outerNode .controlsNode .fullNode{width:15px;height:17px;float: left;margin: 6px 0 0 35px;background: url(images/full_bg.png) no-repeat;cursor: pointer;transition: 0.7s; } .outerNode .controlsNode .fullNode:hover{background: url(images/full_hover_bg.png) no-repeat; }</style></head> <body><!-- 最外层的元素 --><div class='outerNode'><!-- video元素 --><video class='videoNode' src='data/imooc.mp4' poster="data/poster.jpg"></video><!-- 控制器的元素 --><div class='controlsNode'><!-- 控制播放暂停的按钮 --><div class='playNode'></div><!-- video的进度条 --><div class='loadNode'><div class='loadLeft'></div><div class='loadRight'></div><!-- 拖动进度条的按钮 --><div class='crlNode'></div><!-- 真正的进度条 --><div class='lineNode'><div class='lineRight'></div></div></div><!-- 时间的元素 --><div class='timeNode'><span class='now'>00:00</span><span> - </span><span class='all'>4:30</span></div><!-- 声音的标志 --><div class='volumeNode'></div><!-- 声音的条 --><div class='volumeLine'><div class='v_left'></div><div class='v_right'></div><div class='v_DragNode'></div></div><!-- 全屏的按钮 --><div class='fullNode'></div></div></div> <script type="text/javascript">//播放暂停的控制//PlayNode 播放器按钮//VideoNode 播放器//PlayBln 控制暂停播放的布尔值//FullNode 全屏按钮//nowNode 当前时间//allNode 视频的全部时间//LineNode 当前的进度条//CrlNode 进度条按钮//LoadNode 进度条外面的元素var PlayNode = document.getElementsByClassName('playNode')[0],VideoNode = document.getElementsByClassName('videoNode')[0],FullNode = document.querySelector('.fullNode'),nowNode = document.querySelector('.now'),allNode = document.querySelector('.all'),LineNode = document.querySelector('.lineNode'),CrlNode = document.querySelector('.crlNode'),LoadNode = document.querySelector('.loadNode'),VDragNode = document.querySelector('.v_DragNode'),PlayBln = true;//播放、暂停的事件 PlayNode.onclick = function(){//传统的通过布尔值去改变classname的方法 PlayBln = !PlayBln;if(PlayBln == false){this.className = 'pauseNode';VideoNode.play();}else{this.className = 'playNode';VideoNode.pause();}};//全屏按钮的事件 FullNode.onclick = function(){if(VideoNode.webkitRequestFullscreen){VideoNode.webkitRequestFullscreen();}else if(VideoNode.mozRequestFullScreen){VideoNode.mozRequestFullScreen();}else{VideoNode.requestFullscreen();}};//解决最开始时间的NAN的问题 VideoNode.addEventListener('canplay',function(){var needTime = parseInt(VideoNode.duration);var s = needTime%60;var m = parseInt(needTime / 60);var timeNum = toDou(m)+':'+toDou(s);allNode.innerHTML = timeNum;},false);//解决 时间不足10 的问题function toDou(time){return time<10?'0'+time:time;}//当视频播放的时候 需要当前的时间动起来 VideoNode.addEventListener('timeupdate',function(){//目前的 百分比进度 LineNode.style.width = VideoNode.currentTime/VideoNode.duration*100+'%'; CrlNode.style.left = LineNode.offsetWidth - 8.5 + 'px'var needTime = parseInt(VideoNode.currentTime);var s = needTime%60;var m = parseInt(needTime / 60);var timeNum = toDou(m)+':'+toDou(s);nowNode.innerHTML = timeNum;},false);//声音的拖拽按钮 VDragNode.onmousedown = function(e){var ev = e || event;var l = ev.clientX - this.offsetLeft;document.onmousemove = function(e){var ev = e || event;var needX = ev.clientX - l;var maxX = VDragNode.parentNode.offsetWidth - 2.5;needX = needX < -2.5 ? - 2.5 : needX;needX = needX > maxX ? maxX : needX;//计算0 - 1var lastVolume = (VDragNode.offsetLeft + 2) / VDragNode.parentNode.offsetWidth ;VideoNode.volume = lastVolume < 0 ? 0 : lastVolume;VDragNode.style.left = needX + 'px';};document.onmouseup = function(e){document.onmousemove = document.onmouseup = null;}return false;}//拖拽进度条按钮 CrlNode.onmousedown = function(e){var ev = e || event;var l = ev.clientX - this.offsetLeft;VideoNode.pause();document.onmousemove = function(e){var ev = e || event;var needX = ev.clientX - l;var maxX = LoadNode.offsetWidth - 8.5;needX = needX < -8.5 ? -8.5 : needX;needX = needX > maxX ? maxX : needX;CrlNode.style.left = needX + 'px';LineNode.style.width = (CrlNode.offsetLeft+9)/LoadNode.offsetWidth*100 + '%'; };document.onmouseup = function(){document.onmousemove = document.onmouseup = null;VideoNode.currentTime = VideoNode.duration * (CrlNode.offsetLeft+9)/LoadNode.offsetWidth;if(PlayBln == false){//console.log(1); PlayNode.className = 'pauseNode';VideoNode.play();}else{//console.log(2); PlayNode.className = 'playNode';VideoNode.pause();}};return false;};</script> </body> </html>
HTML5视频(自定义视频播放器源码)相关推荐
- 米云影视html5播放器,网页制作HTML5自定义视频播放器源码
video对象 兼容性写法 您的浏览器不支持,请升级您的浏览器 video 标签 width height autoplay muted poster带有预览图(海报图片)的视频播放器 选中video ...
- 视频播放器源码(WinForm)
一.QF万能视频播放器(WinForm) 源码描述: 1.功能介绍 本源码是一个万能视频播放器源码.可实现各种格式的影片播放功能. 2.菜单功能 点击[开始]按钮,弹出窗口,选择影片 ...
- PHP哔哩哔哩bilibili视频弹幕播放器源码 带后台版本
简介: PHP哔哩哔哩bilibili视频弹幕播放器源码 带后台版本 此款播放器源码添加及修复了很多功能,且所有源码均本地化,不存在外链的情况. 环境:PHP7.0+MySQL5.6 优化修复功能: ...
- 最新哔哩哔哩视频弹幕播放器源码+带后台/亲测无错误
正文: 最新哔哩哔哩视频弹幕播放器源码+带后台/亲测无错误,此款播放器源码添加及修复了很多功能,且所有源码均本地化,不存在外链的情况,测试环境:PHP7.0+MySQL5.6 安装教程: 1,访问/d ...
- 最新哔哩bilibili视频弹幕播放器源码+完整无错带后台/亲测
正文: 最新哔哩bilibili视频弹幕播放器源码+完整无错带后台/亲测,此款播放器源码添加及修复了很多功能,且所有源码均本地化,不存在外链的情况,测试环境:PHP7.0+MySQL5.6 播放器跨域 ...
- Android端视频播放器源码分析
这篇文章主要是分析视频播放器的实现代码.代码地址:查看 整体设计框架 我们播放本地的视频文件需要封装出一个输入模块: 输入模块要开启一个线程来处理解封装和解码,把得到的裸数据放到音频和视频的队列中. ...
- VideoJS - HTML5免费视频播放器源码 支持多格式
简介: 播放任何内容: 播放MP4和WebM等"传统"文件格式,但也支持HLS和DASH等自适应流格式.甚至有一个特别的实时流用户界面! 易于设计: Video.js被设计成一个可 ...
- android在线视频播放器源码,请问谁有Android视频播放器简单源码
qq_岁月永恒_0 2018-12-18 10:51 package com.example.mp4; import java.io.IOException; import com.example.m ...
- 网易云音乐HTML5随机音乐播放器源码
介绍: 网易云音乐是一个不正经的播放器. 不过歌单挺好的. 改了一个HTML的页面做了个随机播放器. 开发参考:https://api.uomg.com/doc-rand.music.html 歌单修 ...
最新文章
- Oracle总结第二篇【视图、索引、事务、用户权限、批量操作】
- xp系统本地连接服务器,本地连接,xp系统本地连接不见了怎么办
- ML之LSOLS:LSOLS算法的简介、论文、算法的改进(最佳子集选择OFSS法、前向逐步回归FSR法)、代码实现等详细攻略
- Python函数名的本质,你有了解过嘛?
- HDU - 6333 Problem B. Harvest of Apples(莫队变形+思维+组合数学,好题)
- socket的accept函数解析以及服务器和多个客户端的端口问题
- Daily Scrum 10.29
- 201521123040《Java程序设计》第10周学习总结
- NGINX基于Tomcat配置负载均衡
- list遍历_Qt 容器类之遍历器和隐式数据共享
- python与线性代数 线性方程组的解集
- 网络带宽与实际上传下载速度之间关系
- iOS :APP 提交描述注意事项
- 一个简单企业信息网站架构
- 如何在windows上安装和配置php-7.3.5-Win32-VC15-x64
- RSA非对称加密算法介绍及其简单数学原理
- 互联网快讯:粉笔科技布局线下打造双核驱动;极米产品获用户青睐;迅雷发布2021年财报;荣耀Magic4系列国内发布
- 互联网十大网络流行语
- CorelDRAW常用工具之涂抹工具
- mysql 部署master slave_MySQL Master Slave 数据同步,集群。
热门文章
- python 企业微信机器人自动推送文字和文件
- java执行脚本用sh和./的区别
- matlab中omega,TSPLIB数据集简介与MATLAB读取
- 赶集网CDC案例-蔡峰:赶集网CDC异构数据同步方案实践-IT168 信息化专区
- python编程培训多少钱-python编程语言学费多少钱?python培训费用贵吗
- 日文转换为罗马音_又一首为故事而诞生的音乐,YOASOBI:群青|零基础学唱日文歌曲...
- 在线获取中国境内省市县shp文件的方法
- sklearn.cluster.KMeans 参数介绍
- 计算机amibios设置教程,AMI BIOS,详细教您刷新ami bios
- mysql适合储存高清电影的数据类型_下列数据类型中适合存储PDF文档的是( ) (5.0分)_学小易找答案...