HTML5 视频播放(video),JavaScript控制视频的实例代码


Posted in HTML / CSS onOctober 08, 2018

具体代码如下所示:

 

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
figcaption {
text-align: center;
line-height: 150px;
font-family: "Microsoft Yahei";
font-size: 24px;
}
.player {
width: 720px;
height: 360px;
margin: 10px auto;
border: 1px solid #000;
background-color: #000;
position: relative;
border-radius: 6px;
}
.player video {
width: 720px;
height: 360px;
}
.controls {
width: 700px;
height: 40px;
background-color: rgba(255,255,0,0.3);
position: absolute;
bottom: 10px;
left: 10px;
border-radius: 10px;
}
.switch {
position: absolute;
width: 22px;
height: 22px;
background-color: red;
left: 10px;
top: 9px;
border-radius: 50%;
}
.progress {
width: 432px;
height: 10px;
position: absolute;
background-color: rgba(255,255,255,0.4);
left: 40px;
top: 15px;
border-radius: 4px;
overflow: hidden;
}
.curr-progress {
width: 0%;
height: 100%;
background-color: #fff;
}
.time {
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #fff;
position: absolute;
left: 510px;
top: 10px;
}
.extend {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
right: 10px;
top: 10px;
}
style>
head>
<body>
<figure>  
<figcaption>视频案例figcaption>
<div class="player">
<video src="11.mp4">video>
<div class="controls">
<a href="#" class="switch">a>
<div class="progress">
<div class="curr-progress">div>
div>
<div class="time">
<span class="curr-time">00:00:00span>/
<span class="total-time">00:00:00span>
div>
<a href="#" class="extend">a>
div>
div>
figure>
<script>
var video = document.querySelector('video');
var playBtn = document.querySelector('.switch');
var currProgress = document.querySelector('.curr-progress');
var currTime = document.querySelector('.curr-time');
var totalTime = document.querySelector('.total-time');
var extend = document.querySelector('.extend');
var tTime = 0;
playBtn.onclick = function() {
if(video.paused){  // 如果视频是暂停的
video.play();    //play()播放  load()重新加载  pause()暂停
}else{
video.pause();
}
}
//当视频能播放(已经通过网络加载完成)时
video.oncanplay = function() {
tTime = video.duration;  //获取视频总时长(单位秒)
var tTimeStr = getTimeStr(tTime);
totalTime.innerHTML = tTimeStr;
}
//当视频当前播放时间更新的时候
video.ontimeupdate = function() {
var cTime = video.currentTime;  //获取当前播放时间 
var cTimeStr = getTimeStr(cTime);
console.log(cTimeStr);
currTime.innerHTML = cTimeStr;
currProgress.style.width = cTime/tTime*100+"%";
}
extend.onclick = function() {
video.webkitRequestFullScreen();  //视频全屏
}
//将以秒为单位的时间变成“00:00:00”格式的字符串
function getTimeStr(time) {
var h = Math.floor(time/3600);
var m = Math.floor(time%3600/60);
var s = Math.floor(time%60);
h = h>=10?h:"0"+h;
m = m>=10?m:"0"+m;
s = s>=10?s:"0"+s;
return h+":"+m+":"+s;
}
script>
body>
html>

总结

以上所述是小编给大家介绍的HTML5 视频播放(video),JavaScript控制视频的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 #HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 #HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 #HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 #HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 #HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 #HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 #HTML / CSS
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHP重载基础知识回顾
2020/09/10 PHP
extjs两个tbar问题探讨
2013/08/08 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
JS实现分页导航效果
2020/02/19 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
编写Python CGI脚本的教程
2015/06/29 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
动物科学专业毕业生的自我评价
2013/11/29 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
优秀实习生感言
2014/03/01 职场文书
党员个人整改措施
2014/10/24 职场文书
党支部半年考察意见
2015/06/01 职场文书
八月迷情观后感
2015/06/11 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
Pandas自定义选项option设置
2021/07/25 Python
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技