html模拟抖音视频界面效果

最新推荐文章于 2024-10-28 11:42:14 发布

橙-极纪元JJYCheng

最新推荐文章于 2024-10-28 11:42:14 发布

阅读量2.2k

点赞数 3

分类专栏： VUE JS 前端HTML 文章标签： html 前端 css 抖音界面 html模拟抖音视频界面效果

本文链接：https://blog.csdn.net/cplvfx/article/details/128644700

版权

JS 同时被 3 个专栏收录

164 篇文章

订阅专栏

前端HTML

82 篇文章

订阅专栏

VUE

58 篇文章

订阅专栏

使用到的技术框架

vant（2.12.53）、vue.js（2.6.14）、axios.min.js

全局初始化CSS

/*
【网页CSS初始化】
作者：cplvfx
参考：头条手机站（m.toutiao.com）、京东手机站（https://m.jd.com/）、vant2（https://youzan.github.io/vant/v2/#/zh-CN/）
*/
html, body, table, td, tr, th,
div, span, a, input, button,
caption, dd, dl, dt, fieldset, figure, form,
h1, h2, h3, h4, h5, h6,
legend, ul, li, menu, ol, p, pre, table, td, textarea {
    -webkit-font-smoothing: antialiased;
    /*对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /*webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节*/
    outline: 0;
    /*轮廓*/
    border: 0;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    background: #ffffff;
    margin: 0; 
    font-size: 1rem;
    -webkit-text-size-adjust: none;
    touch-action: manipulation;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}
 

table {
    border-collapse: collapse;
    border-spacing: 0;
}

table, td, tr {
    border-collapse: collapse;
}



a {
    text-decoration: none;
    color:#333333;
 }

a:active, a:hover, a:visited {
    color: inherit;
}

button, input, textarea {
    color: inherit;
    font: inherit;
}


ol, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

q:after, q:before {
    content: none
}

textarea {
    overflow: auto;
    resize: none
}

p {
    line-height: 1.62rem;
}


.fl {
    float: left
}

.fr {
    float: right
}

/*清除浮动*/
.cl:after {
    clear: both;
    content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

.hot{
    color: #BCAC9D;
    font-weight: bold;
}
.txt-default {
    color: #333333;
}

.txt-default2 {
    color: #999999;
}  

.txt-primary {
    color: #07c160;
}

.txt-info {
    color: #1989fa;
}

.txt-danger {
    color: #ee0a24;
}

.txt-warning {
    color: #ff976a;
} 
/*【网页CSS初始化-end】*/

/* 【公共容器】 start */
.content{
    width: 94%;
    margin: 0 auto ;
    overflow-x: hidden;
}
.itemData{
    width: 100%;
    margin-top: 1rem;
    margin-bottom:1rem;
    border-bottom: 0.06rem solid #EBEBEB;
}
.itemData img{
    border-radius: 0.6rem;
}
.des { 
    width: 100%;
}
.des a{
    color: #666666;
}
.foot{
    color: #999999; 
    font-size: 0.87rem;
    display:flex; 
    justify-content: space-between; 
    align-items: center;
    margin-top:0.3rem;
    margin-bottom: 0.5rem;
} 
.foot a{
    color: #999999; 
}
.foot .tag{
    background: #FC3437;
    border-radius: 0.1rem;
    padding: 0.1rem 0.18rem;
}
.foot .tag{
    color: #FFFFFF;
}
.foot .price{
    font-size: 1.12rem;
    color: #FF0000;
}
.foot .userInfo{
    height: 1.62rem;
    display:flex;
    align-items: center;
}
.foot .userInfo .userPicture{
    width:1.62rem;
    height: 1.62rem;
    margin-right: 0.6rem;
}
.foot .userInfo .userPicture img{
    width:1.62rem;
    height: 1.62rem; 
}
.foot .userInfo .userName{
    height: 1.62rem;  
    line-height: 1.62rem;  
}
.itemTitle{
    font-size: 1rem;
    line-height: 1.2rem; 
    margin-bottom:0.3rem;
}
 
/* 【公共容器】 end */

/* 底部导航 start */
 
.footNav img.add{
    width: 2.87rem;
    height: 2.25rem;
}
.footNav .van-tabbar-item__icon .van-icon{
    font-size: 1.62rem;
}
/* 底部导航 end */

.main-body{
    width: 100%;
    padding-bottom: 5rem;
}

视频css

/* 视频列表 start */
.videoItem .des{
    text-align: center;
    height: 14.2rem;
    overflow: hidden;
    margin-top: 0.5rem;
}
.videoItem .picture{
    width: 100%; 
    height: 14rem;
    z-index: 1;
    border-radius: 0.6rem;
    overflow: hidden;
}

.videoItem .picture .pictureImg{ 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}
.videoItem .play{
    margin: 0 auto;
    width: 3.12rem; 
    height:  3.12rem; 
    position: relative;
    top: -8.25rem;
    z-index: 10;
}
/* 视频列表 end */

/* 视频详情 start*/
.videoDetailsBox{
    margin-top: 2.88rem;
    width: 100%;
    height: 100%;
    overflow: hidden; 
    color: #ffffff;
}
.videoDetailsBox .videoItem{
    width: 100%;
    height: 100%;
    z-index: 1;
}
.videoDetailsBox .videoPlay{
    width: 100%;
    height:2.5rem;
    z-index: 99;
    position: fixed; 
    text-align: center;
}
.videoDetailsBox .videoPlay img{
    width: 6.25rem;
    height:6.25rem;
}
.videoDetailsBox .videoTools{
    width: 100%;
    height:2.5rem;
    z-index: 2;
    position: relative; 
    text-align: center;
}
.videoDetailsBox .videoRightTools
{
    width:3.12rem;
    height:20rem;
    position: fixed;
    bottom: 7rem;
    right: 0rem;
    z-index: 2;
}
.videoDetailsBox .videoRightTools .ToolsItem{
    width:2.9em;
    height:3.37rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; 
    margin-bottom: 0.4rem;
}
.videoDetailsBox 
.videoRightTools 
.ToolsItem .ToolsItemIcon .iconfont
{
    font-size:2rem;
}
.videoDetailsBox 
.videoRightTools 
.ToolsItem .des{
    font-size:0.88rem;
    text-align: center;
}
.videoDetailsBox .videoRightTools 
.ToolsItem .userPicture{ 
    width:2.9em;
    height:2.9em; 
    line-height: 2.9rem;
    background-color: #ffffff; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.videoDetailsBox .videoRightTools 
.ToolsItem .userPicture img{ 
    width:2.4rem;
    height:2.4rem;
    border-radius: 50%;
}
.videoDetailsBox .videoRightTools 
.ToolsItem .userStar{
    width:2.9em;
    height:1.25rem;
    display: block;
    text-align: center;
    margin-top: -0.6rem;
}
.videoDetailsBox .videoRightTools 
.ToolsItem .userStar img{
    width:1.25rem;
    height:1.25rem;
}
.videoDetailsBox .videoFootBox
{
    width: 100%;
    min-height:2.5rem;
    z-index: 2;
    position: fixed; 
    bottom: 3.8rem;  
}
.videoDetailsBox .videoFootBox a{
    color: #ffffff;
}
.videoDetailsBox .videoFootBox .videoFoot
{
    width: 96%;
    margin: 0 auto;
}
.videoDetailsBox .videoFootBox .videoFoot h1{
    font-size:1rem;
}
.videoDetailsBox .videoFootBox .videoFoot .des{
    font-size:0.9rem;
}
/* 视频详情 end*/

html

<!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,shrink-to-fit=no,viewport-fit=cover,minimum-scale=1,maximum-scale=1,user-scalable=no,">
    <meta name="renderer" content="webkit">
    <meta name="imagemode" content="force">

    <title>视界-详情页</title>
    <meta name="keywords" content="关键词">
    <meta name="description" content="描述"> 

    <link rel="stylesheet" href="/StaticFile/js/common/vant.index2.12.53.css" />
    <link rel="stylesheet" href="/StaticFile/css/common/iconfont/iconfont.css" />
    
    <link rel="stylesheet" href="/StaticFile/css/common/conmm.css" /> 
  
    <script src="/StaticFile/js/common/vue.min2.6.14.js"></script>
    <script src="/StaticFile/js/common/axios.min.js"></script>
    <script src="/StaticFile/js/common/vant.min2.12.53.js"></script>

</head>
 
<body style="background-color: #000000;">  

<!-- 顶部标题 start -->
   <div id="topTitle" class="topTitle">
        <van-nav-bar
        title="视界详情" 
        left-arrow
        fixed
        @click-left="onClickLeft"
        @click-right="onClickRight"
        />
   </div> 
<!-- 顶部标题 end -->

<!-- 视频 start -->
<div class="videoDetailsBox" id="videoDetailsBox" :style="'width:'+BoxWidth+'rem;height:'+BoxHeight+'rem;'">
    <div class="videoItem">
        <video id="video" loop preload="auto" autoplay :style="'width:'+VideoWidth+'rem;height:'+VideoHeight+'rem;'" @click="PlayPause">
            <source src="1.mp4" type="video/mp4">
            您的浏览器不支持Video标签。
        </video> 
        <!-- 播放/暂停工具 start-->
        <div v-if="IsPlay==false" class="videoPlay" :style="'bottom: '+videoPlayBottom+'rem;'" @click="PlayPause">
            <span><img src="/StaticFile/img/play.png"/></span>
        </div>
        <!-- 播放/暂停工具 end-->
        <!-- 全屏播放工具 start-->
        <div v-if="isMaxHeight==false" class="videoTools" :style="'bottom: '+videoToolsBottom+'rem;'">
            <!-- <span>全屏播放 &nbsp;<van-icon name="expand-o" /></span> -->
        </div>
        <!-- 全屏播放工具 end-->
    </div>
    <!-- 右边工具 start -->
    <div class="videoRightTools">
        <div class="ToolsItem">
            <a href="#" class="userPicture"><img src="/StaticFile/img/UserImg.png"/></a>
            <span class="userStar"><img src="/StaticFile/img/addStar.png"/></span>
        </div>
        <div class="ToolsItem">
            <div class="ToolsItemIcon"><span class="iconfont icon-aixin_shixin"></span></div>
            <span class="des">889</span>
        </div>
        <div class="ToolsItem">
            <div class="ToolsItemIcon"><span class="iconfont icon-pinglun4"></span></div>
            <span class="des">889</span>
        </div>
        <div class="ToolsItem">
            <div class="ToolsItemIcon"><span class="iconfont icon-shoucang"></span></div>
            <span class="des">889</span>
        </div>
        <div class="ToolsItem">
            <div class="ToolsItemIcon"><span class="iconfont icon-fenxiang"></span></div>
            <span class="des">889</span>
        </div>
    </div>
    <!-- 右边工具 end -->
    <!-- 底部描述 start -->
    <div class="videoFootBox">
        <div class="videoFoot">
            <h1><a href="#">橙cplvfx</a></h1>
            <div class="des">
                每个颜色都超级可爱,超级夏天, 还有一串珍珠链条,超显高级,我入了好几个色...                 
            </div>
        </div>
    </div>
    <!-- 底部描述 end -->
</div>
<!-- 视频 end -->

    <!-- 底部导航 start -->
    <div id="footNav" class="footNav">
        <van-tabbar v-model="active" active-color="#D1AF55" inactive-color="#666666">
            <van-tabbar-item icon="icon iconfont icon-shouye1">
                <a href="/index.html">首页</a>
            </van-tabbar-item>
            <van-tabbar-item icon="icon iconfont icon-shangchengxiantiao">
                <a href="#">商城</a>
            </van-tabbar-item>
            <van-tabbar-item>
                <a href="#"><img class="add" src="/StaticFile/img/icon1.png" alt=""></a>
            </van-tabbar-item>
            <van-tabbar-item icon="icon iconfont icon-xiaoxi3">
                <a href="#">消息</a>
            </van-tabbar-item>
            <van-tabbar-item icon="icon iconfont icon-wodegerenxinxi">
                <a href="#">我的</a>
            </van-tabbar-item>
        </van-tabbar>
   </div>
    <!-- 底部导航 end -->
 
    <script src="/StaticFile/js/common/conmm.js"></script>
    <script src="/StaticFile/js/page/videoDetails.js"></script> 
</body> 
</html>

页面用到js-videoDetails.js

//页面加载完成执行 start
window.onload=function(event){
    console.log('页面加载完成event==',event);
    console.log('页面加载完成时间：',event.timeStamp); 
    

    

    var videoVueObj = new Vue({
        el: '#videoDetailsBox',
        data: { 
            size:16,//基础单位大小，单位px （我的HTML底层元素设置的是font-size:16px;所以我这里是16）
            BoxWidth:0,//容器宽度，单位rem
            BoxHeight:0,//容器高度，单位rem
            VideoWidth:0,//视频宽度，单位rem
            VideoHeight:0,//视频高度，单位rem 
            topTitle_height:46,//头部标题的高度,单位px
            footNav_height:50,//底部导航的高度,单位px
            isMaxHeight:false,//视频是否占满全屏
            videoToolsBottom:0,//工具距离底部的位置，单位rem 
            videoPlayBottom:0,//工具距离底部的位置，单位rem 
            IsPlay:true,//当前是否播放
        },
        created() {
            this.loade();
        },
        methods:{ 
            loade(){
                var video=document.querySelector("#video");//当前视频对象;  
                var that=this;
                video.onloadedmetadata=function(res){
                    console.log('媒介元素的持续时间以及其他媒介数据已加载时运行脚本：',res);  
                    //窗体
                    var window_Width=window.innerWidth;
                    var window_Height=window.innerHeight;  
                    console.log('窗体-宽度：',window_Width);
                    console.log('窗体-高度：',window_Height);
                    //原视频
                    var videoWidth=video.videoWidth;
                    var videoHeight=video.videoHeight; 
                    console.log('原视频-宽度：',videoWidth);
                    console.log('原视频-高度：',videoHeight);
                    //视频根据窗体自动缩放
                    //公式-等比例缩放后的高=（缩放后的宽度/原始宽度）*原始高度
                    var Box_videoWidth=window_Width;
                    var Box_videoHeight=(window_Width/videoWidth)*videoHeight; //缩放后的高度
                    console.log('视频缩放-宽度：',Box_videoWidth);
                    console.log('视频缩放-高度：',Box_videoHeight);  
                    var total_height=window_Height-(that.topTitle_height+that.footNav_height);//视频容器总高度
                    that.BoxWidth=window_Width/that.size;//容器宽度，单位rem
                    that.BoxHeight=total_height/that.size;//容器高度，单位rem
                    that.VideoWidth=window_Width/that.size;//视频宽度，单位rem
                    that.VideoHeight=total_height/that.size;//视频高度，单位rem
                    console.log('视频容器最大高度应为：',total_height);
                    //视频是否占满全屏（缩放后的高度[是否大于]视频容器总高度）
                    //避免布局容差 （缩放后的高度+60）
                    if((Box_videoHeight+60)>total_height)
                    {
                        that.isMaxHeight=true;//视频是否占满全屏
                    }

                    //工具距离底部的位置，单位rem
                    that.videoToolsBottom=(((total_height-Box_videoHeight)/2)-10)/that.size;

                    //播放/暂停工具 距离底部的位置，单位rem
                    that.videoPlayBottom=((total_height/2)+50)/that.size; 

                    //判断当前视频是否播放 
                    that.IsPlay=video.paused; 
                }
                video.onloadstart=function(res){
                    console.log('===当浏览器开始加载媒介数据时运行脚本===',res); 
                        video.play(); 
                     //判断当前视频是否播放 
                     that.IsPlay=video.paused; 
                }
            },
            //视频点击-播放与暂停
            PlayPause(){
                console.log('视频点击-播放与暂停') 
                var video=document.querySelector("#video"); 
                this.IsPlay=video.paused; 
                if (video.paused) 
                video.play(); 
                else 
                video.pause(); 
            }
        }
    });

};
//页面加载完成执行 end