移动端基于video标签二次封装样式,记录生活方便以后cv

已于 2023-07-18 17:59:49 修改
阅读量247 收藏
点赞数
文章标签： 生活
于 2023-07-18 17:58:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzzbbb_/article/details/131793268
版权

先给大家看看样式是否符合在考虑要不要copy，因为没有啥技术难度，就是样式，也没有考虑h265等别的兼容性

详情是有全屏按钮的，正常是没有全屏按钮

image.png

image.png

1.在component文件夹下创建一个Myvideo.vue的文件

image.png

2.在component文件夹的index.js中全局引入Myvideo组件

import MyVideo from './MyVideo/index.vue';
Vue.component('MyVideo', MyVideo);

我这里直接上代码了

<template>
    <div class="videoBox" @click.stop="clickVideo">
        <!-- :controls="isPlay ? true : false" -->
        <!-- :poster="cover" 封面图 -->
        <video
            :loop="isDetails ? false : true"
            x5-playsinline
            playsinline="true"
            x-webkit-airplay="allow"
            webkit-playsinline="true"
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            disablePictureInPicture="true"
            :autoplay="isDetails ? true : false"
            controlslist="nodownload noremoteplayback noplaybackrate"
            :src="video"
            ref="video"
            @play="isPlay = true"
            @pause="isPlay = false"
            @timeupdate="timeUpdate"
        ></video>
        <!-- 定位到播放位置 -->
        <div class="position" v-if="targetTime" ref="targetTime">
            上次播放至{{ targetTime }}，已续播
        </div>
        <!-- 正在播放 -->
        <div class="pause" ref="pause" v-if="isPlay">
            <div class="time">{{ timeDisplay }}</div>
            <div class="right">
                <svg
                    t="1689131823093"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7676"
                    width="20"
                    height="20"
                >
                    <path
                        d="M426.666667 138.666667v746.666666a53.393333 53.393333 0 0 1-53.333334 53.333334H266.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V138.666667a53.393333 53.393333 0 0 1 53.333334-53.333334h106.666666a53.393333 53.393333 0 0 1 53.333334 53.333334z m330.666666-53.333334H650.666667a53.393333 53.393333 0 0 0-53.333334 53.333334v746.666666a53.393333 53.393333 0 0 0 53.333334 53.333334h106.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V138.666667a53.393333 53.393333 0 0 0-53.333334-53.333334z"
                        fill="#ffffff"
                        p-id="7677"
                    ></path>
                </svg>
                <!-- 全屏按钮 -->
                <svg
                    @click.stop="fullscreen"
                    v-if="isDetails"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="w-70 h-70"
                    color="#fff"
                    style="margin-left: 5rem"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
                    />
                </svg>
            </div>
        </div>
        <!-- 暂停播放 -->
        <div class="play" ref="play" v-else>
            <div class="time">{{ timeDisplay }}</div>
            <div class="right">
                <svg
                    t="1689131454914"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="6652"
                    width="20"
                    height="20"
                >
                    <path
                        d="M161.2 839.9v-654c0-56.1 60.7-91.1 109.3-63.1l566.3 327c48.6 28 48.6 98.1 0 126.2L270.4 903c-48.5 28-109.2-7.1-109.2-63.1z"
                        fill="#ffffff"
                        p-id="6653"
                    ></path>
                </svg>
                <!-- 全屏按钮 -->
                <svg
                    @click.stop="fullscreen"
                    v-if="isDetails"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="w-70 h-70"
                    color="#fff"
                    style="margin-left: 5rem"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
                    />
                </svg>
            </div>
        </div>
        <!-- 时间条 -->
        <div class="timeLine" :class="isPlay ? 'bottom' : 'top'">
            <van-slider
                v-model="sliderVal"
                :min="0"
                :max="sliderMax"
                @change="dragend"
            />
        </div>
        <!-- 重新播放按钮 -->
        <div class="replay" v-if="isReplay" @click="replay">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-100 h-100"
                style="color: #fff"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
                />
            </svg>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        cover: {
            typeof: String,
        },
        video: {
            typeof: String,
        },
        // 详情页面的参数
        isDetails: {
            typeof: Boolean,
            default: false,
        },
        time: {
            typeof: String,
        },
    },
    data() {
        return {
            // 是否正在播放
            isPlay: false,
            //总时长
            duration: "00:00",
            // 当前时间
            timeDisplay: "00:00",
            sliderMax: 0,
            sliderVal: 0,
            //播放时间
            targetTime: "",
            //重新播放
            isReplay: false,
        };
    },
    watch: {
        isPlay() {
            this.$nextTick(() => {
                if (this.isPlay) {
                    this.$refs.pause.style.opacity = "1";
                    if (this.targetTime && this.$refs.targetTime) {
                        this.$refs.targetTime.style.opacity = "1";
                    }
                    setTimeout(() => {
                        if (this.$refs.pause) {
                            this.$refs.pause.style.opacity = "0";
                        }
                        if (this.targetTime && this.$refs.targetTime) {
                            this.$refs.targetTime.style.opacity = "0";
                        }
                    }, 1500);
                } else {
                    this.$refs.play.style.opacity = "1";
                    // setTimeout(() => {
                    //     this.$refs.play.style.opacity = "0";
                    // }, 1500);
                }
            });
        },
        time() {
            console.log(this.time, Number(this.time) !== 0);
            if (this.time && Number(this.time) !== 0) {
                console.log(1);
                this.$nextTick(() => {
                    this.$refs.video.currentTime = this.time;
                    this.targetTime = this.formatTime(this.time);
                });
            } else {
                this.targetTime = "";
            }
        },
    },
    mounted() {
        if (this.time && Number(this.time) !== 0) {
            this.$nextTick(() => {
                this.$refs.video.currentTime = this.time;
                this.targetTime = this.formatTime(this.time);
            });
        } else {
            this.targetTime = "";
        }
    },
    methods: {
        // 全屏
        fullscreen() {
            this.$refs.video.pause();
            this.$emit("fullscreen");
            // if (this.$refs.video.requestFullscreen) {
            //     this.$refs.video.requestFullscreen();
            // } else if (this.$refs.video.webkitRequestFullscreen) {
            //     // 兼容性处理
            //     this.$refs.video.webkitRequestFullscreen();
            // }
        },
        // 重新播放
        replay() {
            // 把按钮隐藏
            this.isReplay = false;
            // 将video时间转为0
            this.$refs.video.currentTime = 0;
            // 开始播放
            this.$refs.video.play();
        },
        // 时间条变化
        dragend(val) {
            console.log(val);
            this.$nextTick(() => {
                // 赋值给video的播放时间
                this.$refs.video.currentTime = val;
                this.targetTime = "";
            });
        },
        // 修改时间格式 00:00
        formatTime(seconds) {
            let minutes = Math.floor(seconds / 60);
            let remainingSeconds = seconds % 60;

            let formattedTime = "";
            if (minutes < 10) {
                formattedTime += "0";
            }
            formattedTime += minutes + ":";
            if (remainingSeconds < 10) {
                formattedTime += "0";
            }
            formattedTime += remainingSeconds;

            return formattedTime;
        },
        // 播放时间
        timeUpdate() {
            if (!this.$refs.video) return;
            this.timeDisplay = this.formatTime(
                Math.floor(this.$refs.video.duration) -
                    Math.floor(this.$refs.video.currentTime)
            );
            this.sliderMax = Math.floor(this.$refs.video.duration);
            this.sliderVal = Math.floor(this.$refs.video.currentTime);
            if (this.isDetails) {
                this.$emit("saveTime", this.sliderVal);
                let over = Boolean(
                    Math.floor(this.$refs.video.duration) ===
                        Math.floor(this.$refs.video.currentTime)
                );
                if (over) {
                    this.isReplay = true;
                } else {
                    this.isReplay = false;
                }
            }
        },
        clickVideo() {
            if (this.isPlay) this.$refs.video.pause();
            else this.$refs.video.play();
        },
    },
};
</script>
<style lang="scss" scoped>
:deep .van-slider__bar {
    transition: all 1s;
}
.videoBox {
    position: relative;
    min-height: 200rem;
    max-height: 390rem;
    video {
        width: 100%;
        min-height: 200rem;
        max-height: 390rem;
        object-fit: cover;
        object-position: center;
    }
    .position {
        position: absolute;
        bottom: 28rem;
        left: -8rem;
        font-size: 12rem;
        color: white;
        padding: 5rem 15rem;
        background: rgba(34, 34, 34, 0.237) 0;
        transform: scale(0.85);
        transition: 0.5s;
    }
    .play {
        z-index: 2;
        position: absolute;
        // bottom: 15rem;
        // left: 15rem;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        bottom: 0;
        opacity: 1;
        width: 100%;
        height: 40rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10rem 0 15rem;
        transition: 0.8s;
        background: linear-gradient(
            to bottom,
            transparent,
            rgba(0, 0, 0, 0.273)
        );
        .time {
            color: white;
            font-size: 15rem;
            padding-top: 4rem;
        }
        .right {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .pause {
        @extend .play;
    }

    .timeLine {
        position: absolute;
        z-index: 3;
        width: 100%;
    }
    .bottom {
        bottom: 0;
        .van-slider {
            height: 3rem;
        }
        :deep .van-slider__button {
            display: none !important;
        }
        :deep .van-slider__bar {
            background-color: #001fffe8;
        }
    }
    .top {
        bottom: 15rem;
        width: 60%;
        left: 21%;
        .van-slider {
            height: 5rem;
            background-color: #ffffffa5;
        }
        :deep .van-slider__button {
            width: 12rem;
            height: 12rem;
        }
        :deep .van-slider__bar {
            background-color: #001fffe8;
        }
    }
    .replay {
        position: absolute;
        width: 50rem;
        height: 50rem;
        border-radius: 50%;
        background-color: #0000007a;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }
}
</style>

zzzbbb_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
video基础介绍&封装react-video基础组件，ES6
weixin_30343157的博客
11-14 420
　　好几个月没有写博客了，人都赖了，今天抽了一点时间把最近项目react中video整理了一下（感觉这个以后用的活比较多） 　　1.前三部部分详细归纳了video的基础知识，属性和功能； 　　2.第四部分是封装了一个video基础组件，所有事件都采用对外开放状态，在引入时可以直接书写用，小伙伴们可以直接参考example，对于其他属性比如是否采用浏览器控制条等，可以结合前三部分的梳理自己重新书...
html5+video手机样式修改,如何修改 video 样式(示例代码)
weixin_42098759的博客
06-03 1325
我们这里说的“修改 video 样式”并不是要自己实现一套 controls，而是尝试修改 video 的默认样式隐藏全屏按钮这个很容易查到video::-webkit-media-controls-fullscreen-button{ display: none; }那么，video::-webkit-media-controls 是什么？还可以用它来定义哪些元素的样式，见下文自定义其它样式为什...
通过css修改video标签的原生样式
最新发布
ta_huang的博客
02-26 897
在控制台中打开设置，勾选显示用户代理 shadow DOM，就可以审查video标签的内部样式了。箭头处标出来的就是shodow DOM的内容，这些内容正常不可见的，只有勾选了才会显示。修改video标签的原生样式。
vue封装video组件（基于chimee）
pizixian_的博客
04-04 390
vue封装video组件
vue封装video组件（基于flv）
pizixian_的博客
04-04 506
vue封装video组件
封装videoJS，可以作为Vue组件使用
小匠的Blog
07-20 269
【代码】封装videoJS，可以作为Vue组件使用。
VUE2 引入vue-video-player
hyo_O的博客
12-29 911
vue2中引入vue-video-player
如何封装个video插件。自定义进度条点击拖拽，播放暂停，播放倍速
tree_ge的博客
12-15 1618
vue3开发嵌入式，播放器在浏览器中是正常的。但嵌入到app里，app不适配，无法全屏，无法设置倍速，controls在视频播放时点击视频无法弹出。
video标签隐藏底部进度条等内容
一个超爱喝可乐的web前端攻城狮
05-10 6247
video标签隐藏底部进度条等内容 html <video id="videoDom" controls="controls" src="***"></video> css video::-webkit-media-controls-fullscreen-button { display: none; } video::-webkit-media-controls-play-button { display: none; } video::-webkit-med
Flutter 视频播放器组件封装
weixin_43800535的博客
02-27 1391
Flutter 视频播放器组件封装
一个移动端H5Video标签播放视频的实现
08-11
一个移动端 H5 Video 标签播放视频的实现
H5Video移动端播放器jquery插件
12-14
$('div').video({ src:[], // 播放地址，{src:'',pic:''},'****.mp4'形式 fix:true, // 是否禁止最大化 auto:true, // 立即播放 controls:true, // 是否显示按钮 loop:true, // 是否循环，单个视频有效 ...
HTML5 video标签（播放器）学习笔记（二）:播放控制
11-21
上一篇介绍了html5标签video（播放器）初始化需要做的一些工作，如何简单快速使用html5的播放器，本文将重点介绍如何用JS来操作video标签，也就是如何对...在对video进行操作的的前先给video标签添加一个ID，这样方便
浅谈html5 video 移动端填坑记
09-27
主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-video:vue移动端简单自定义控件播放器
05-13
vue-videovue移动端简单自定义控件播放器
Vue3封装Video.js组件(基于video.js)
pizixian_的博客
08-31 2950
Vue3封装Video.js组件(基于video.js)
修改video标签默认样式问题video播放器样式优化；video播放器默认显示图片
zhangzuying的博客
12-07 9659
需求： 1.播放器可以支持上传默认封面图片 2.播放器的进度条长度拉长些,与播放器长度一样长，或者其他方式美化一下 首先需求1.播放器可以支持上传默认封面图片解决方案： 1.第一种方法可以直接在video标签中直接添加poster属性 <!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg" controls="controls" poster="../../imgs/poster.png"> you
html5自定义video标签的海报与播放按钮
兰星_thk&try的博客
12-01 5552
一、问题 1.video标签取视频第一帧为海报 2.默认一下播放按键 以上这两点都想自定义 二、思路 使用div把video标签盖住 div中显示自定义的海报图片与按钮 三、步骤分解 1.海报图片作为div的背景 注：无论是横图还是竖图，都希望按原比例显示在div内 css: .yourDiv{ background-color: black; height:20em; back...
移动端video标签封面
09-30
移动端video标签可以通过设置封面来显示一个海报图像，以填充视频播放区域。您可以使用poster属性来指定封面图像的URL。例如，在video标签中添加poster属性，并将其值设置为封面图像的URL，如下所示： <video src="xxxx/xxx.mp4" poster="image.png"></video> 这样，当视频加载之前，封面图像将显示在视频播放区域。一旦用户点击播放按钮，视频将开始播放，封面图像将被视频内容替换。 如果您想隐藏移动端video标签的下载按钮，您可以使用一些CSS样式来实现。下面是一个示例的CSS代码，它可以隐藏下载按钮： video::-webkit-media-controls { overflow: hidden !important; } video::-webkit-media-controls-enclosure { width: calc(100% - 32px); margin-left: auto; } 这段CSS代码将隐藏下载按钮，并将视频播放区域的宽度调整为去除下载按钮后的宽度。 希望这些信息对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值