描述:

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

思路:

放弃使用插件,采用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>

Logo

前往低代码交流专区

更多推荐