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中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
HTML中的表格元素介绍
Feb 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
PHP 采集程序中常用的函数
2009/12/09 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
jquery简单体验
2007/01/10 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python追加元素到列表的方法
2015/07/28 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
Python中扩展包的安装方法详解
2017/06/14 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
2014学雷锋活动心得体会
2014/03/10 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android