vue简单实现移动端视频

描述：视频详情页以及全屏展示视屏详情包括：①提示视频大小，主义流量消耗；②视频右侧下方展示播放量按钮，分享按钮，全屏按钮；③视频正下方展示标题；④图标切换：视频开始按钮、进度条、上一个及下一个视频、全屏按钮；⑤背景毛玻璃样式(暂时先不考虑)全屏同视频详情，区别：标题在视频上方思路：放弃使用插件，采用video标签形式，注掉原生样式。视屏详情：页面静态模块（按钮文字等），通过绝对定位实现；观看次数：

山重水复疑无路

2883人浏览 · 2021-10-08 21:04:14

山重水复疑无路 · 2021-10-08 21:04:14 发布

描述：

视频详情页以及全屏展示
视屏详情包括：①提示视频大小，主义流量消耗；②视频右侧下方展示播放量按钮，分享按钮，全屏按钮；③视频正下方展示标题；④图标切换：视频开始按钮、进度条、上一个及下一个视频、全屏按钮；⑤背景毛玻璃样式(暂时先不考虑)
全屏同视频详情，区别：标题在视频上方

思路：

放弃使用插件，采用video标签形式，注掉原生样式。

视屏详情：

页面静态模块（按钮文字等），通过绝对定位实现；
观看次数：后端数据；视频大小提醒及标题等：定位和后端数据；
上下视频切换：点击按钮调接口返回的src；
全屏按钮：隐藏原生video自带的全屏按钮，实现思路有两种：①通过插件screenfull实现，操作简单；②通过动态更改video标签宽高的方式实现，以下分两种情况：i：手机设置竖屏锁定，则此时要实现全屏则须旋转video90°，同时设置视频宽高；ii：手机未设置竖屏锁定，需要监测手机是否横屏，竖屏时同上一条处理，横屏时则无需旋转，改变宽高即可

全屏：

略

H5自带全屏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>全屏</button>
    <button>退出全屏</button>
    <script>
        var btn = document.querySelector("button");
        btn.onclick = function () {
            //console.log(document.body.webkitRequestFullScreen);
            document.body.webkitRequestFullScreen();
        }
        document.querySelectorAll("button")[1].onclick = function () {
            //此处没有body
            document.webkitCancelFullScreen();
        }
    </script>
</body>
</html>

实现：

改变默认样式：

参考设置video标签的默认样式 - Rachid - 博客园

全屏按钮（插件实现）：

1.安装依赖

 npm install --save screenfull

2.在需要设置的页面导入

import screenfull from "screenfull";

3.实现

<template>
    <div class="video">
        <video
            :src="src"
            ref="video"
            :width="width" :height="height"
            controls="controls"
            controlslist="nodownload nofullscreen noremoteplayback"
            :disablePictureInPicture="true"
            :poster="poster"></video>
        <div class="btn">
            <div class="aaa"></div>
            <div class="bbb"></div>
            <img :src="img" alt="" class="img4" @click="screenfull">
        </div>
    </div>
</template>
<script>
import screenfull from 'screenfull'
export default{
    data(){
        return{
            src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
            poster:require("@/assets/img/logo.png"),
            width: '100%',
            height:'100%',
            img: require("@/assets/img/4.png")
        }
    },
    methods:{
        //  全屏事件
        screenfull() {
            screenfull.toggle();
            console.log(screenfull)
        }
    }
}
</script>
<style lang="less" scoped>
/*video默认aduio音量按钮*/
video::-webkit-media-controls-mute-button { display: none !important;}
/*video默认setting按钮*/
video::-internal-media-controls-overflow-button{ display: none !important;}
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
.video{
    width: 100vw;
    height: 100vh;
}
.btn{
    .aaa{
        z-index: 9999;
        width: 50px;
        height: 50px;
        background: red;
        position: absolute;
        right: 0;
        top: 100px;
    }
    .bbb{
        // z-index: 9999;
        width: 50px;
        height: 50px;
        background: blue;
        position: absolute;
        right: 0;
        top: 300px;
    }
    .img4{
        z-index: 9999;
        width: 50px;
        height: 50px;
        position: absolute;
        border: 1px solid red;
        right: 0;
        bottom: 100px;
        background: blue;
    }
}
</style>

4.效果(原理实现，样式没改丑了点，小声bb)

毛玻璃

.video{
    width: 100vw;
    height: 100vh;
    // background: #000;
    background: url('../../assets/img/bg9.png') no-repeat;
    background-size:  100% 100%;
}

播放按钮

将播放按钮图片定位到合适位置，然后调用video的相关接口

<div class="notice">
    <img src="@/assets/img/2.png" alt="" class="img2" @click="play">
     <div>
         <div>当前视频大小365M</div>
         <div>如您使用移动网络，请注意流量消耗~</div>
      </div>
 </div>


.notice{
    position: absolute;
    z-index: 9999;
    left: 30vw;
    top: 50vh;
    font-size: 16px;
    margin-left: -50px;
    margin-top: -20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    .img2{
        width: 50px;
        height: 50px;
    }
}



play() {
            var video = document.getElementById('video');
            console.log(video.currentTime,video.paused)
            // 判断视频当前状态是 暂停/播放
            if(video.paused){
                video.play()
            }else{
                video.pause()
            }
        }

效果图

全部代码

<template>
    <div class="video">
        <video id="video"
            :src="src"
            ref="video"
            :width="width" :height="height"
            controls="controls"
            controlslist="nodownload nofullscreen noremoteplayback"
            :disablePictureInPicture="true"
            :poster="poster"></video>
        <div class="btn">
            <div class="btn-img">
                <img src="@/assets/img/3.png" alt="" class="img3">
                <div>1111</div>
            </div>
            <div class="btn-img">
                <img src="@/assets/img/1.png" alt="" class="img1">
                <div>分享</div>
            </div>
            <img :src="img" alt="" class="img4" @click="screenfull">
        </div>
        <img src="@/assets/img/5.png" alt="" class="img5" @click="lastVideo">
        <img src="@/assets/img/6.png" alt="" class="img6" @click="nextVideo">
        <img :src="playSrc" alt="" class="img2" @click="play">
        <div class="notice">
            <div id="notice">
                <div>当前视频大小365M</div>
                <div>如您使用移动网络，请注意流量消耗~</div>
            </div>
        </div>
        <!-- <div class="title">买重疾险最应该关注什么，买重疾险最应该关</div> -->
    </div>
</template>
<script>
import screenfull from 'screenfull'
//监听播放时间
var video = document.getElementById('video');
console.log(video)
//使用事件监听方式捕捉事件
// video.addEventListener("timeupdate",function(){
//     var timeDisplay;
// 	//用秒数来显示当前播放进度
// 	timeDisplay = Math.floor(video.currentTime);
// 	console.log(Math.floor(video.currentTime))
//     //当视频播放到 4s的时候做处理
// 	if(timeDisplay == 4){
// 	        //处理代码
// 	}
// },false)
export default{
    data(){
        return{
            src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
            poster: require("@/assets/img/logo.png"),
            width: '100%',
            height:'100%',
            img: require("@/assets/img/4.png"),
            playSrc: require('@/assets/img/2.png')
        }
    },
    methods:{
        //  全屏事件
        screenfull() {
            screenfull.toggle();
            console.log(screenfull)
        },
        lastVideo() {
            this.src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
        },
        nextVideo() {
            this.src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
        },
        play() {
            var video = document.getElementById('video');
            console.log(video.currentTime,video.paused)
            document.getElementById('notice').style.display='none'
            // 判断视频当前状态是 暂停/播放
            if(video.paused){
                video.play()
                this.playSrc = require('@/assets/img/7.png')
            }else{
                video.pause()
                this.playSrc = require('@/assets/img/2.png')
            }
        }
    }
}
</script>
<style lang="less" scoped>
/*video默认aduio音量按钮*/
video::-webkit-media-controls-mute-button { display: none !important;}
/*video默认setting按钮*/
video::-internal-media-controls-overflow-button{ display: none !important;}
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
.video{
    width: 100vw;
    height: 100vh;
    // background: #000;
    background: url('../../assets/img/bg9.png') no-repeat;
    background-size:  100% 100%;
}
//播放按钮
video::-webkit-media-controls-play-button {
    display: none;
}
// 已播放时间
video::-webkit-media-controls-current-time-display{
    margin-top: 50px;
}
//进度条
video::-webkit-media-controls-timeline {
    width: 53%;
    margin-left: 50px;
    margin-bottom: 45px;
}
.title{
    position: absolute;
    z-index: 9999;
    left: 7vw;
    bottom: 10vh;
    font-size: 16px;
    width: 70%;
    color: #fff;
    font-weight: 550;
}
.notice>div{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.notice{
    position: absolute;
    z-index: 9999;
    left: 30vw;
    top: 54vh;
    font-size: 16px;
    margin-left: -50px;
    margin-top: -20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}
.img2{
    position: absolute;
    z-index: 9999;
    left: 45vw;
    bottom: 47vh;
    width: 50px;
    height: 50px;
}
.img5,.img6{
    z-index: 9999;
    position: absolute;
    right: 0;
    bottom: 60px;
    width: 14px;
    height: 14px;
}
.img5{
    left: 40px;
}
.img6{
    right: 90px;
}
.btn{
    z-index: 9999;
    position: absolute;
    right: 12px;
    bottom: 50px;
    img{
        width: 50px;
        height: 50px;
        display: block;
    }
    .aaa{
        width: 50px;
        height: 50px;
        background: red;
        margin-bottom: 30px;
    }
    .bbb{
        width: 50px;
        height: 50px;
        background: blue;
        margin-bottom: 30px;
    }
    .btn-img{
        margin-bottom: 30px;
        color: #fff;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img{
            margin-bottom: 4px;
        }
    }
}
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^