html5 video 自定义控制条,缓冲进度怎么获取
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5 video 自定义控制条,缓冲进度怎么获取相关的知识,希望对你有一定的参考价值。
你看下这个这是html代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超富创意的CSS3飞机跑道进度条动画DEMO演示</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<h3 class="progressbar-title">HTML5</h3>
<div class="progress">
<div class="progress-bar" style="width: 55%; background:#005394;">
<span>55%</span>
</div>
</div>
<h3 class="progressbar-title">CSS3</h3>
<div class="progress">
<div class="progress-bar" style="width: 85%; background:#d9534f;">
<span>85%</span>
</div>
</div>
<h3 class="progressbar-title">Java Script</h3>
<div class="progress">
<div class="progress-bar" style="width: 40%; background:#f0ad4e;">
<span>40%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>
这是css代码
body
background: #a8b1b6;
color: #2fa0ec;
font-weight: 500;
font-size: 1.05em;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
acolor: #d8dedc;outline: none;
a:hover,a:focuscolor:#74777b;text-decoration: none;
.demowidth: 100%;padding: 2em 0;
.progress
height: 30px;
line-height: 35px;
background: #809495;
box-shadow: none;
padding: 6px;
margin-top:20px;
overflow: visible;
border-radius:10px;
.progress:after
content: "";
display: block;
border-top: 4px dashed #fff;
margin-top:8px;
.progressbar-title
color:#d8dedc;
font-size:15px;
margin:5px 0;
font-weight: bold;
.progress .progress-bar
position: relative;
border-radius: 10px 0 0 10px;
animation: animate-positive 2s;
.progress .progress-bar span
position: absolute;
top: -50px;
right: -40px;
color: #fff;
display: block;
font-size: 17px;
font-weight: bold;
padding: 5px 7px;
background: #333;
border-radius: 0 0 5px 5px;
.progress .progress-bar span:before
content: "";
position: absolute;
bottom: -14px;
left: 18px;
border: 7px solid transparent;
border-top: 7px solid #333;
.progress .progress-bar span:after
content: "\f072";
font-family: fontawesome;
font-size: 48px;
color: #333;
position: absolute;
top: 51px;
right: 6px;
transform: rotateZ(48deg);
@-webkit-keyframes animate-positive
0% width: 0%;
@keyframes animate-positive
0% width:0%;
参考技术A video 元素有一个 buffered 属性,video.buffered 得到一个 TimeRanges 对象,包含一个或多个 TimeRange(时间段),这就是当前 video 元素已缓存的部分,通过 TimeRanges.length 可以得到时间段的数量,通过 TimeRanges.start(index) 或 TimeRanges.end(index) 可以获取第 index(从0开始)个时间段的开始时间或结束时间,遍历 TimeRanges 获取当前播放时间(video.currentTime)所在的时间段的索引i,TimeRanges.end(i) / video.duration 即可作为缓冲进度百分比。
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
-
在小程序开发的时候,其他小程序能够正常
暂停、播放、切换进度
,但是在微信小程序发现没有生效,原因是平台差异// 官网案例是这样获取 videoContext 的 this.videoContext = uni.createVideoContext('myVideo') // 但是如果需要处理微信小程序的差异,则需要将 this 传入 this.videoContext = uni.createVideoContext('myVideo', this)
-
案例效果
<template> <view class="video-view"> <!-- 播放器 --> <video autoplay id="myVideo" class="video-content" :src="drama.limit_url" :controls="false" @loadedmetadata="loadedmetadata" @timeupdate="timeUpdate" > </video> <!-- 遮盖层 --> <view class="video-cover" @click="touchPlay"> <view class="view-cover-content"> <!-- 信息栏 --> <view class="video-info"> <!-- 弹簧 --> <view style="flex: 1;"></view> <!-- 显示时间 --> <view class="video-time" v-if="isDrag"> <view class="video-time-current"> dragStarTime </view> <view style="padding: 0 20rpx;">/</view> <text> dragEndTime </text> </view> <!-- 进度栏 --> <view class="slider-view" @click.stop> <u-slider v-model="currentTime" min="0" :max="duration" inactiveColor="rgba(255, 255, 255, 0.2)" activeColor="#F8DD52" @changing="sliderChanging" @change="sliderChange" ></u-slider> </view> <!-- 当前集数 --> <view class="video-info-current" @click.stop> <!-- 名称 --> <view class="video-info-title text-ell" v-if="drama.project_drama_name"> drama.project_drama_name -第 drama.eq_number 集</view> <!-- 弹簧 --> <view style="flex: 1;"></view> <!-- 选集 --> <view class="video-info-btn" @click="touchSwitch"> <view class="arrow-right-title">选集</view> <u-icon name="arrow-right" color="#fff"></u-icon> </view> </view> </view> </view> </view> </view> </template> <script> export default props: // 当前剧集 drama: type: Object, default: () => , data() return // 播放器上下文 videoContext: undefined, // 播放状态 isPlay: true, // 当前时长 currentTime: 0, // 总时间 duration: 0.1, // 是否正在拖拽进度 isDrag: false, // 拖拽时视频时间 dragStarTime: '', dragEndTime: '', // 当前还没显示过提示消息 isShowMsg: true , mounted () // 获取播放器上下文(后面的 this 需要传入,在微信小程序上无法暂停播放拖拽精度,所以需要传入这个) this.videoContext = uni.createVideoContext('myVideo', this) , methods: // 播放 play () this.videoContext.play() , // 暂停 pause () this.videoContext.pause() , // 播放状态切换 touchPlay () this.isPlay = !this.isPlay if (this.isPlay) this.play () else this.pause() , // 播放进度发生变化 timeUpdate (e) // 拖拽时不需要进行更新 if (!this.isDrag) // 更新进度 const currentTime = e.detail this.currentTime = currentTime // 播放完成 if (Math.trunc(currentTime) === Math.trunc(duration)) this.$emit('playcomplete', e) // 返回当前播放时间 this.$emit('timeupdate', e) , // 拖拽结束 sliderChange (value) // 停止拖拽 this.isDrag = false // 判断一下是否大于基础时间 if (this.duration > 0.1) // 跳到指定时间点 this.videoContext.seek(value) // 并调用播放 this.play() , // 正在拖拽 sliderChanging (value) // 开始拖拽 this.isDrag = true // 刷新时间 this.reloadVideoTime() , // 刷新显示时间 reloadVideoTime () // 当前时间 this.dragStarTime = this.$pub.TIME_CONVERT(this.currentTime) // 总时间 this.dragEndTime = this.$pub.TIME_CONVERT(this.duration) , // 加载完成 loadedmetadata (e) const duration = e.detail // 记录视频总时间 this.duration = duration // 回调 this.$emit('loadcomplete') , // 切换选集 touchSwitch () this.$emit('switch') </script> <style lang="scss"> .video-view position: relative; width: 100%; height: 100%; .video-content width: 100%; height: 100%; .video-cover position: absolute; left: 0; top: 0; width: 100%; height: 100%; .view-cover-content position: relative; width: 100%; height: 100%; .video-info display: flex; flex-direction: column; position: absolute; bottom: 0; left: 0; width: 100%; height: 246rpx; background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.40) 100%, rgba(0,0,0,0.40) 100%); .slider-view flex-shrink: 0; .video-info-current flex-shrink: 0; display: flex; align-items: center; width: 100%; color: #fff; font-size: 34rpx; padding: 0 40rpx 40rpx; width: calc(100% - 80rpx); .video-info-btn flex-shrink: 0; display: flex; align-items: center; padding-left: 40rpx; .arrow-right-title margin-right: 10rpx; .video-time display: flex; align-items: center; justify-content: center; font-size: 64rpx; color: rgba(255, 255, 255, 0.7); .video-time-current color: #fff; </style>
以上是关于html5 video 自定义控制条,缓冲进度怎么获取的主要内容,如果未能解决你的问题,请参考以下文章
在tomcat8.0服务器上,html5的video原始的进度条没用了,点击的时候视频进度不变,谁知道是怎么回事?
html5 中的 video 如何隐藏底部的全屏按钮或控制条