巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站资讯News

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

0
一佰互联网站扶植(www.taishanly.com) 宣布时辰:2020-04-20 08:55:52 阅读数: 125

详细代码以下所示:

 

<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节制视频的实例代码,但愿对大师有所赞助,若是大师有任何疑难请给我留言,小编会实时答复大师的。在此也很是感激大师对网页设想网站的撑持!

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

上一篇:HTML5完成签到 功效
下一篇: 挪动端html5摹拟长按事务的完成体例
[前往消息列表]

相干消息more

20
04月
HTML5之SVG 2D入门7—SVG元素的

后面先容了良多的图形元素,若是良多图形自身是一样的,须要每次都去界说一个新的么?咱们可否共用一些图形呢?这是这节的重点-SVG元素的重用。 ... >>概况

28
04月
php将csv文件导入到mysql数据库的方

本文实例报告了php将csv文件导入到mysql数据库的体例。分享给大师供大师参考。详细阐发以下:本法式完成数据导入道理是先把csv文件上传... >>概况

06
12月
PW域名专业网站域名好挑选

甚么是pw域名?pw是英文Professional Website的缩写,是Resellerclub之母公司—Directi团体联手Cent... >>概况

21
04月
css 若何断根浮动的示例代码

本文概述本文的框架图以下:一、浮动究竟是甚么?W3school中给出的浮动界说为浮动的框能够向左或向右挪动,直到它的外边缘碰着包罗框或另外一个... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站