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 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php类中private属性继承问题分析
2012/11/01 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
PHP云打印类完整示例
2016/10/15 PHP
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
基于Python解密仿射密码
2019/10/21 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
公积金单位接收函
2014/01/11 职场文书
求职信模板怎么做
2014/01/26 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
工程质量承诺书
2014/03/27 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书