1:首先看下效果图吧!(样式只是自己粗略写的)。
2:代码部分:
(1)样式贴一下自己的:
<style>
#video { width:100%}
.videoContent { position:relative;}
.videoContent > div { position: absolute;color: #fff; font-size: 10px; right: 5px; top: 5px; }
</style>
(2):html部分:
<div class="videoContent">
<div>视频倒计时<span id="current"></span>s</div>
<video src="~/Content/images/video.mp4" controls="controls" autoplay loop
id="video" />
</div>
(3)js 部分
<script>
//视频播放倒计时
$(document).ready(function(){
$("#video").on(
"timeupdate",
function (event) {
var duration = parseInt(this.duration);//视频总时长
var currentTime = parseInt(this.currentTime);//视频已播放时长
$("#current").text(duration - currentTime);//获取视频还剩多长时间
});
})
</script>