video(倍速播放,暂停,播放,逐帧播放,关闭音量,倒放,前进多少秒,进度条)功能

这是一个使用Vue.js编写的视频播放控制组件,包括播放/暂停、音量控制、倍速选择和模拟进度条。代码中实现了倒放(非浏览器原生支持)和快进功能,但倒放通过定时器逐帧操作,效率较低。浏览器最大支持16倍速播放。进度条可以通过点击和拖动事件来更新当前播放时间。
摘要由CSDN通过智能技术生成
<template>
    <div style="height: 100vh;">
        <video ref="vid" width='1000px' height='560px'>
            <source src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/97ac2dcc1367e03ac580204d6ca9a724.mp4" />
        </video>
        <div class="jdt">
            <div class="jd" ref="jdt">
                <div style="background-color: green;height: 100%;border-radius: 8px;"
                    :style="`width: ${currentTime / duration * 1000}px`">
                </div>
            </div>
        </div>
        <div class="vid">
            <i :class="play" @click="changePlay"></i>
            <svg @click="back" t="1677726468265" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2790" width="36" height="36">
                <path
                    d="M0 512c0 282.8 229.2 512 512 512s512-229.2 512-512S794.8 0 512 0 0 229.2 0 512z m99.2 174.4C75.8 631.2 64 572.5 64 512s11.8-119.2 35.2-174.4c22.6-53.3 54.9-101.3 96-142.4 41.2-41.2 89.1-73.5 142.4-96C392.8 75.8 451.5 64 512 64s119.2 11.8 174.4 35.2c53.3 22.6 101.3 54.9 142.4 96 41.2 41.2 73.5 89.1 96 142.4C948.2 392.8 960 451.5 960 512s-11.8 119.2-35.2 174.4c-22.6 53.3-54.9 101.3-96 142.4-41.2 41.2-89.1 73.5-142.4 96C631.2 948.2 572.5 960 512 960s-119.2-11.8-174.4-35.2c-53.3-22.6-101.3-54.9-142.4-96-41.2-41.2-73.5-89.1-96-142.4z"
                    p-id="2791" fill="#ffffff"></path>
                <path
                    d="M256 305.3v413.3c0 6.8 8 10.5 13.2 6.1L473.1 551v167.7c0 6.8 8 10.5 13.2 6.1L720 525.6V704h64V320h-64v178.4L486.3 299.2c-5.2-4.4-13.2-0.7-13.2 6.1V473L269.2 299.2c-5.2-4.4-13.2-0.7-13.2 6.1z"
                    p-id="2792" fill="#ffffff"></path>
            </svg>
            <svg @click="fast" t="1677726468265" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2790" width="36" height="36">
                <path
                    d="M0 512c0 282.8 229.2 512 512 512s512-229.2 512-512S794.8 0 512 0 0 229.2 0 512z m99.2 174.4C75.8 631.2 64 572.5 64 512s11.8-119.2 35.2-174.4c22.6-53.3 54.9-101.3 96-142.4 41.2-41.2 89.1-73.5 142.4-96C392.8 75.8 451.5 64 512 64s119.2 11.8 174.4 35.2c53.3 22.6 101.3 54.9 142.4 96 41.2 41.2 73.5 89.1 96 142.4C948.2 392.8 960 451.5 960 512s-11.8 119.2-35.2 174.4c-22.6 53.3-54.9 101.3-96 142.4-41.2 41.2-89.1 73.5-142.4 96C631.2 948.2 572.5 960 512 960s-119.2-11.8-174.4-35.2c-53.3-22.6-101.3-54.9-142.4-96-41.2-41.2-73.5-89.1-96-142.4z"
                    p-id="2791" fill="#ffffff"></path>
                <path
                    d="M256 305.3v413.3c0 6.8 8 10.5 13.2 6.1L473.1 551v167.7c0 6.8 8 10.5 13.2 6.1L720 525.6V704h64V320h-64v178.4L486.3 299.2c-5.2-4.4-13.2-0.7-13.2 6.1V473L269.2 299.2c-5.2-4.4-13.2-0.7-13.2 6.1z"
                    p-id="2792" fill="#ffffff"></path>
            </svg>
            <el-select v-model="second" @change="changeSecond">
                <el-option v-for="item in options" :key="item" :label="item" :value="item">
                </el-option>
            </el-select>
            <i class="el-icon-caret-left" @click="zplay(1)"></i>
            <i class="el-icon-caret-right" @click="zplay(2)"></i>
            <i :class="volume" @click="changeVolume"></i>
        </div>

    </div>
</template>

<script>
var zzht, zzqj
export default {
    data() {
        return {
            vid: "",
            play: "el-icon-video-play",
            isPlay: false, // true播放 false 暂停
            duration: "", // 视频总时长
            second: 1, // 默认1秒
            options: [0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 16, 32],
            currentTime: 0,
            volume: "el-icon-microphone",
            haveVoice: true, // 有声音
        }
    },
    mounted() {
        this.vid = this.$refs.vid // 获取video dom
        setTimeout(() => {
            this.duration = this.vid.duration
            setInterval(() => {
                this.currentTime = this.vid.currentTime
            }, 1000)
        }, 300)
    },
    methods: {
        // 调节音量  我的音量只有100跟0别问  问就是懒
        changeVolume(){
            this.haveVoice = !this.haveVoice
            if (this.haveVoice){ // 为true有声音  直接拉到100  别问 问就是懒
                this.volume = "el-icon-microphone"
                this.vid.volume = 100
            } else { // 为false就是声音  直接干到0
                this.volume = "el-icon-turn-off-microphone"
            }
        },
        // 逐帧倒放 / 前近
        zplay(val) {
            this.vid.pause()
            clearInterval(zzqj) // 清除倒放
            clearInterval(zzht) // 清除逐帧倒放
            zzht = setInterval(() => {
                if (val == 1) { // 倒放
                    this.vid.currentTime -= 1 / 12
                } else if (val == 2) { // 前近
                    this.vid.currentTime += 1 / 12
                }

            }, 1000)
        },
        // 变速
        changeSecond() {
            this.vid.playbackRate = this.second
        },
        // 倒放
        back() {
            clearInterval(zzqj) // 清除倒放
            clearInterval(zzht) // 清除逐帧倒放
            zzqj = setInterval(() => {
                this.vid.currentTime -= 1 / 12
            }, 100)
        },
        // 快进10秒
        fast() {
            this.vid.currentTime += 10
        },
        // 播放暂停
        changePlay() {
            this.isPlay = !this.isPlay
            if (this.isPlay) {
                // 如果为播放 将图标改为暂停 视频播放
                this.play = "el-icon-video-pause"
                this.vid.play()
            } else {
                // 如果为暂停 将图标改为播放 视频暂停
                this.play = "el-icon-video-play"
                this.vid.pause()
            }
        }
    }
}
</script>

<style scoped>
.jd {
    width: 1000px;
    border-radius: 8px;
    background-color: #fff;
    height: 10px;
    cursor: pointer;
}

.jdt {
    background-color: black;
    width: 1000px;
    height: 30px;
    display: flex;
    align-items: center;
}

.vid {
    background-color: black;
    width: 1000px;
    height: 80px;
    display: flex;
    align-items: center;
}

.vid i,
.vid svg {
    font-size: 40px;
    cursor: pointer;
    color: #fff;
    margin-right: 10px;
}

.vid i:hover,
.vid svg:hover {
    color: #9bc9fd;
}
</style>

这是我昨天研究写的一个demo,功能不完全,也不想加,大致都搞明白了,上面是全部代码

样式如下

 UI 图懒得去找 大致讲解一下

倒放 浏览器端是不支持的 但是用定时器一秒触发12每次到1帧 这样写法也很离谱了

倍速播放  浏览器端 最大支持16倍 速播放  在大0.1都报错

进度条 如果要做点击拖动的话 就绑定一个点击事件 跟滑动事件 得到e 然后算法:

当前点击的横坐标 / 外部进度条的宽 * 视频总时长  就得到了当前点击或滑动的进度条width了

其他的就没上么好注意的了

在uniapp中,如果video视频播放进度条不变,可能是由于以下几个原因导致的。 首先,检查你的背景音频是否正常播放。背景音频是一个API,它在App后台运行时仍然可以播放音乐。然而,这个API可能会消耗大量的电力。如果背景音频运行不正常,可能会导致视频播放出现问题。 其次,检查你在视频播放组件中是否正确配置了mediaType。在uniapp中,video组件有一个mediaType属性,它用于指定该组件只能拍摄图片或选择图片,或者只能拍摄视频或选择视频。如果你错误地配置了mediaType,可能会导致进度条不更新的问题。 最后,检查你在页面配置文件pages.json中对窗口动画的设置。在这个配置文件中,你可以设置窗口显示的动画效果,包括动画类型和动画持续时间。如果你设置了fade-in动画,并且持续时间设置得较长,可能会导致进度条不更新的情况。 综上所述,要解决video视频播放进度条不变的问题,你需要确保背景音频正常运行,正确配置video组件的mediaType属性,并检查页面配置文件中的动画设置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [微信小程序开发--uniapp](https://blog.csdn.net/weixin_44769612/article/details/108991080)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值