HTML5 视频播放(video),JavaScript控制视频的实例代码
发布时间:2018-10-08 17:29:21 作者:佚名 我要评论
这篇文章主要介绍了HTML5 视频播放(video),JavaScript控制视频的实例代码,需要的朋友参考下吧
具体代码如下所示:
<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控制视频的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- HTML5中的video标签用于播放视频文件的,本文介绍了Html5 video 标签 src 用数据流方式播放视频,具有一定的参考价值,感兴趣的可以了解一下2023-09-27
- 由于期末大作业我想插入一个背景音乐,实现点开网页就会自动播放音频的效果,今天通过本文给大家分享下我基于HTML实现音乐或视频自动播放功能,代码简单易懂,需要的朋友参2022-05-27
- 这篇文章主要介绍了HTML5 video循环播放多个视频的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来2020-08-06
- 这篇文章主要介绍了html5中嵌入视频自动播放的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起2020-05-25
- 这篇文章主要介绍了html5自动播放mov格式视频的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-14
- 这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-06
- 目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧2019-07-29
- 这篇文章主要介绍了HTML5视频播放插件 video.js介绍 ,需要的朋友可以参考下2018-09-29
- 这里主要研究的是通过应用html5来解决视频播放的问题。Adobe公司因为战略错误,忽视了移动互联这块,移动终端对flash支持并不好,特别是苹果终端都不支持flash(苹果电脑和2016-11-06
- 本文主要介绍了html网页播放多个视频的几种方法,包含iframe标签,VLC插件和一些常见的js插件,具有一定的参考价值,感兴趣的可以了解一下2024-03-04
最新评论