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 自定义控制条,缓冲进度怎么获取的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序-video禁止拖动进度条

在tomcat8.0服务器上,html5的video原始的进度条没用了,点击的时候视频进度不变,谁知道是怎么回事?

android 怎么自定义绘制如下图中这种进度条

html5 中的 video 如何隐藏底部的全屏按钮或控制条

UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)

H5移动端自定义video播放控件controls(带播放暂停,进度条拖拽)