video标签播放器的使用，列表播放的使用

淩亂°似流年 2022-04-16 06:13 390阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css" />
        <script>
            resize();
            window.onresize = function () {
                resize();
            }
            function resize(tt) {
                var docEl = document.documentElement;
                var clientWidth = window.innerWidth;
                if (clientWidth >= 750) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            }
        </script>
    </head>
    <style>
        [v-cloak] {
            display: none;
        }
    
        * {
            margin: 0;
            padding: 0;
        }
    
        /*清除浮动*/
        .clearfix:after {
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
    
        .clearfix {
            zoom: 1;
        }
    
        .app_cont {
            padding: 0.1rem 0.3rem;
            font-size: 0.32rem;
        }
    
        .app-head {
            width: 100%;
        }
    
        ul,
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
    
        .app_head li {
            display: block;
            border-bottom: 1px solid #E5E5E5;
            padding: 0.2rem 0;
        }
    
        .app_head {
            z-index: 2;
        }
    
        .head_top img {
            display: block;
            float: left;
            width: 2.1rem;
            height: 2.1rem;
        }
    
        .head_top .head_txt {
            float: left;
            width: 4.8rem;
            height: 2.1rem;
            font-size: 0.32rem;
        }
    
        .head_top .head_txt p {
            display: block;
            height: 0.7rem;
            line-height: 0.7rem;
            font-size: 0;
            padding: 0 0.1rem;
        }
    
        .head_top .head_txt p span {
            display: inline-block;
            font-size: 0.32rem;
        }
    
        .head_top .head_txt p .txt_tit {
            width: 30%;
            font-family: PingFangSC-Regular;
            font-size: 0.34rem;
            color: #333;
            letter-spacing: 0.0028rem;
            text-align: left;
            font-weight: 400;
        }
    
        .head_top .head_txt p .txt_info {
            width: 70%;
            text-align: right;
            font-family: PingFangSC-Regular;
            font-size: 0.32rem;
            color: #979797;
            letter-spacing: 0.0027rem;
        }
    
        .app_head ul .head_list {
            width: 100%;
            height: 0.88rem;
            box-sizing: border-box;
            font-size: 0;
            line-height: 0.68rem;
        }
    
        .app_head ul .head_list .list_tit {
            display: inline-block;
            width: 30%;
            font-family: PingFangSC-Regular;
            font-size: 0.32rem;
            color: #333;
            letter-spacing: 0;
            line-height: 0.32rem;
            text-align: left;
        }
    
        .app_head ul .head_list .list_info {
            display: inline-block;
            width: 70%;
            font-family: PingFangSC-Regular;
            font-size: 0.32rem;
            color: #9B9B9B;
            letter-spacing: 0;
            text-align: right;
            line-height: 0.32rem;
        }
    
        /* 收起展示信息 */
        .show_hide_info {
            width: 100%;
            height: 0.82rem;
            line-height: 0.82rem;
            text-align: center;
            font-family: PingFangSC-Regular;
            font-size: 0.3rem;
            color: #3098F2;
            letter-spacing: 0;
        }
    
        .show_hide_info img {
            display: inline-block;
            width: 0.3rem;
            height: 0.3rem;
            vertical-align: middle;
        }
    
        /* 出险记录 */
        .body_cxjl {
            width: 100%;
        }
    
        /* 出险记录 */
        .cxjl_show_hide {
            width: 100%;
            height: 0.88rem;
            line-height: 0.88rem;
            font-family: PingFang-SC-Bold;
            font-size: 0.34rem;
            color: #333;
            letter-spacing: 0;
        }
    
        .cxjl_show_hide img {
            display: block;
            width: 0.28rem;
            height: 0.17rem;
            float: right;
            margin-top: 0.3rem;
        }
    
        .cxjl_tit {
            display: block;
        }
    
        .cxjl_tit li {
            width: 100%;
            line-height: 0.88rem;
            border-top: 1px solid #E5E5E5;
            color: #556169;
        }
    
        .cxjl_tit .Otitle {
            font-family: PingFang-SC-Bold;
            font-size: 0.34rem;
            color: #000000;
            letter-spacing: 0;
        }
    
        .tit_list .tit_date>span {
            display: inline-block;
        }
    
        .tit_list li.tit_date>span:first-child {
            width: 40%;
            text-align: left;
            color: #2C3236;
            line-height: 0.88rem;
        }
    
        .tit_list li.tit_date>span:last-child {
            width: 60%;
            text-align: right;
            color: #979797;
        }
    
        .tit_list li>span {
            display: inline-block;
        }
    
        .tit_list li>span:first-child {
            /* width: 24%; */
            vertical-align: top;
            line-height: .45rem;
    
        }
    
        .tit_list li>span:last-child {
            width: 76%;
            line-height: 0.45rem;
        }
    
        .tit_list li.tit_info {
            padding: 0.15rem 0 0;
        }
    
        .borderTop {
            border-top: 1px solid #E5E5E5;
        }
    
        /* 维保 */
        .weibao .wb_sign {
            display: inline-block;
            background: #F0F8FF;
            border-radius: 6px;
            font-family: PingFangSC-Regular;
            font-size: 0.24rem;
            color: #5094F3;
            letter-spacing: 0;
            line-height: 0.28rem;
            padding: 0.05rem;
            margin-left: 0.05rem;
        }
    
        .weibao .cxjl_tit .weib>span {
            display: inline-block;
        }
    
        .weibao .cxjl_tit .weib>span:first-of-type {
            width: 50%;
        }
    
        .weibao .cxjl_tit .weib>span:last-of-type {
            width: 50%;
            text-align: right;
        }
    
        .total_data {
            width: 100%;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #E5E5E5;
            padding: 0.3rem 0;
        }
    
        .total_data>div {
            width: 2.1rem;
            height: 1.6rem;
            border-radius: 8px;
            text-align: center;
            padding: 0.2rem 0;
            box-sizing: border-box;
        }
    
        .total_data>div>p {
            height: 0.6rem;
            line-height: 0.6rem;
        }
    
        .total_data>div>p:first-child {
            font-weight: bold;
            font-size: 0.48rem;
        }
    
        .total_data>div>p:last-child {
            font-size: 0.32rem;
        }
    
        .total_data_1 {
            background: rgba(230, 247, 255, 1);
            color: rgba(80, 148, 243, 1);
        }
    
        .total_data_2 {
            background: rgba(255, 247, 235, 1);
            color: rgba(254, 156, 72, 1);
        }
    
        .total_data_3 {
            background: rgba(227, 252, 240, 1);
            color: rgba(12, 189, 132, 1);
        }
    
        .data_des {
            width: 100%;
        }
    
        .data_des_list {
            width: 100%;
            /* background: red; */
        }
    
        .des_list_li1 {
            font-size: 0;
            color: #333;
            padding: 0.15rem 0;
        }
    
        .des_list_li1>span {
            display: inline-block;
            width: 33.333333%;
            text-align: center;
            font-size: 0.32rem;
        }
    
        .des_list_li1>span:first-of-type {
            text-align: left;
        }
    
        .des_list_li1>span:first-of-type {
            text-align: left;
        }
    
        .des_list_li1>span:last-of-type {
            text-align: right;
        }
    
        .des_list_li2 {
            display: flex;
            flex-wrap: nowrap;
            padding: 0.1rem;
    
        }
    
        .des_listt {
            background: #f3f4f5;
            border-radius: 5px;
            padding: 0.1rem;
            box-sizing: border-box;
        }
    
        .des_list_li2>span {
            display: inline-block;
        }
    
        .des_list_li2>span:first-of-type {
            width: 24%;
            font-size: 0.28rem;
            font-family: PingFang-SC-Medium;
        }
    
        .des_list_li2>span:last-of-type {
            font-size: 0.28rem;
            font-family: PingFang-SC-Medium;
            color: #888;
        }
    
        /* 照片 */
        .pictures {
            width: 100%;
        }
    
        .pic_list {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
    
        .pic_box {
            width: 2.84rem;
            height: 2.2rem;
            margin-bottom: 0.3rem;
            position: relative;
        }
    
        .pic_box img {
            width: 2.84rem;
            height: 2.2rem;
        }
        .over_title{
            display: block;
            width: 2.84rem;
            height: 0.6rem;
            line-height: 0.6rem;
            position: absolute;
            bottom: 0;
            left: 0;
            text-align: center;
            color: #fff;
            background: rgba(136,136,136,.6);
        }
        .video_list{
            width: 6.9rem;
            height: 2.8rem;
            margin: 0.2rem 0;
            position: relative;
            background: #E5E5E5;
        }
        .video_list video{
            width:100%;
            height:100%;
            object-fit:contain;
        }
        .play_pause{
            width: 0.93rem;
            height: 0.93rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-70%)
        }
        .play_pause img{
            width: 100%;
            height: 100%;
        }
        .video_title{
            width: 100%;
            height: 0.77rem;
            line-height: 0.77rem;
            text-align: center;
            background: rgba(0,0,0,0.60);
            overflow: hidden;
            position: absolute;
            bottom: 0;
            left: 0;
            font-family: PingFangSC-Regular;
            font-size: 0.32rem;
            color: #FFFFFF;
            letter-spacing: 0.0028rem;
        }
        
    </style>
    
    <body>
        <div id="app" v-cloak>
            <div class="app_cont">
                <div class="app_head">
                    <ul>
                        <li class="head_top clearfix">
                            <img src="./imgs/topimg.png" alt="车辆图片">
                            <div class="head_txt">
                                <p><span class="txt_tit">车牌号</span><span class="txt_info">粤A66666</span></p>
                                <p><span class="txt_tit">车架号</span><span class="txt_info">LFGH67K3799T94671</span></p>
                                <p class="vtop"><span class="txt_tit">发动机号</span><span class="txt_info">126F83899</span></p>
                            </div>
                        </li>
                        <transition-group name="fade">
                            <template v-if="head_show_hide">
                                <li class="head_list" v-bind:key="0"><span class="list_tit">品牌型号</span><span class="list_info">别克牌SGM716LEAT</span></li>
                                <li class="head_list" v-bind:key="1"><span class="list_tit">车辆类型</span><span class="list_info">别克牌SGM716LEAT</span></li>
                                <li class="head_list" v-bind:key="2"><span class="list_tit">所有人</span><span class="list_info">别克牌SGM716LEAT</span></li>
                                <li class="head_list" v-bind:key="3"><span class="list_tit">使用性质</span><span class="list_info">别克牌SGM716LEAT</span></li>
                                <li class="head_list" v-bind:key="4"><span class="list_tit">注册时间</span><span class="list_info">别克牌SGM716LEAT</span></li>
                            </template>
                        </transition-group>
                    </ul>
                </div>
                <div class="show_hide_info" @click="()=>this.head_show_hide = !this.head_show_hide">
                    <span v-if="head_show_hide">收起信息</span>
                    <span v-else>展开信息</span>
                    <img src="./imgs/up.png" alt="展开信息" v-if="head_show_hide">
                    <img src="./imgs/down.png" alt="展开信息" v-else>
                </div>
                <div class="app_body">
                    
                    <div class="body_cxjl">
                        <hr style='width:7.5rem;margin-left:-0.3rem;background-color:#E5E5E5;height:1px;border:none;'>
                        <div class="cxjl_show_hide clearfix" @click="()=>this.cxjl_show_hide=!this.cxjl_show_hide">
                            出险记录
                            <img src="./imgs/upp.png" v-if="cxjl_show_hide">
                            <img src="./imgs/dow.png" v-else>
                        </div>
                        <transition name="fade">
                            <div v-if="cxjl_show_hide">
                                <ul class="cxjl_tit">
                                    <li class="Otitle">出险总览</li>
                                    <li>理赔总次数：2次</li>
                                    <li>理赔总金额：10000元</li>
                                    <li>维修总金额：10000元</li>
                                    <li>换件总金额：10000元</li>
                                </ul>
                                <hr style='width:7.5rem;margin-left:-0.3rem;background-color:#E5E5E5;height:1px;border:none;'>
                                <div class="cxjl_show_hide">
                                    出险记录
                                </div>
                                <ul class="cxjl_tit tit_list">
                                    <li class="tit_date"><span>2018-9-9</span><span>理赔金额：500元</span></li>
                                    <li class="tit_info"><span>事故描述：</span><span>{
       {info_some}}</span></li>
                                    <li class="tit_info"><span>维修内容：</span><span>{
       {info_some}}</span></li>
                                    <li class="tit_info"><span>换件信息：</span><span>{
       {info_some}}</span></li>
                                </ul>
                                <ul class="cxjl_tit tit_list">
                                    <li class="tit_date"><span>2018-9-9</span><span>理赔金额：500元</span></li>
                                    <li class="tit_info"><span>事故描述：</span><span>{
       {info_some}}</span></li>
                                    <li class="tit_info"><span>维修内容：</span><span>{
       {info_some}}</span></li>
                                    <li class="tit_info"><span>换件信息：</span><span>{
       {info_some}}</span></li>
                                </ul>
                                <ul class="cxjl_tit tit_list">
                                    <li class="tit_date"><span>2018-9-9</span><span>理赔金额：500元</span></li>
                                    <li class="tit_info"><span>事故描述：</span><span>{
       {info_some}}</span></li>
                                    <li class="tit_info"><span>维修内容：</span><span>{
       {info_some}}</span></li>
                                    <li class="tit_info"><span>换件信息：</span><span>{
       {info_some}}</span></li>
                                </ul>
                                <transition name="fade">
                                    <template v-if="cxjl_info_off">
                                        <ul class="cxjl_tit tit_list">
                                            <li class="tit_date"><span>2018-9-9</span><span>理赔金额：500元</span></li>
                                            <li class="tit_info"><span>事故描述：</span><span>{
       {info_some}}</span></li>
                                            <li class="tit_info"><span>维修内容：</span><span>{
       {info_some}}</span></li>
                                            <li class="tit_info"><span>换件信息：</span><span>{
       {info_some}}</span></li>
                                        </ul>
                                    </template>
                                </transition>
                                <div class="show_hide_info borderTop" @click="()=>this.cxjl_info_off=!this.cxjl_info_off">
                                    <span v-if="cxjl_info_off">收起信息</span>
                                    <span v-else>显示全部</span>
                                    <img src="./imgs/up.png" v-if="cxjl_info_off">
                                    <img src="./imgs/down.png" v-else>
                                </div>
                            </div>
                        </transition>
                    </div>
                    
                    
                    <div class="body_cxjl weibao">
                        <hr style='width:7.5rem;margin-left:-0.3rem;background-color:#E5E5E5;height:1px;border:none;'>
                        <div class="cxjl_show_hide clearfix" @click="()=>this.weibao_all_off=!this.weibao_all_off">
                            维保记录
                            <img src="./imgs/upp.png" v-if="weibao_all_off">
                            <img src="./imgs/dow.png" v-else>
                        </div>
                        <transition name="fade">
                            <div v-if="weibao_all_off">
                                <ul class="cxjl_tit">
                                    <li class="Otitle">维保总览</li>
                                    <li>总公里数<span class="wb_sign">公里数正常</span></li>
                                    <li class="weib"><span>最后一次维保</span><span>2017-07-07</span></li>
                                    <li class="weib"><span>重要组成部件维修</span><span>否</span></li>
                                    <li class="weib"><span>结构件维修</span><span>否</span></li>
                                    <li class="weib"><span>外观覆盖件维修</span><span>否</span></li>
                                </ul>
                                <div class="cxjl_show_hide" style="border-top:0.2rem solid #E5E5E5;">
                                    维保总览
                                </div>
                                <div class="total_data">
                                    <div class="total_data_1">
                                        <p>11</p>
                                        <p>总次数</p>
                                    </div>
                                    <div class="total_data_2">
                                        <p>11</p>
                                        <p>总次数</p>
                                    </div>
                                    <div class="total_data_3">
                                        <p>11</p>
                                        <p>总次数</p>
                                    </div>
                                </div>
                                <div class="data_des">
                                    
                                    <div class="data_des_list">
                                        <div class="des_list_li1">
                                            <span>2018-08-07</span>
                                            <span>2300公里</span>
                                            <span>保养</span>
                                        </div>
                                        <div class="des_listt">
                                            <div class="des_list_li2">
                                                <span>内容：</span>
                                                <span>{
       {info_some}}</span>
                                            </div>
                                            <div class="des_list_li2">
                                                <span>材料：</span>
                                                <span>{
       {info_some}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="data_des_list">
                                        <div class="des_list_li1">
                                            <span>2018-08-07</span>
                                            <span>2300公里</span>
                                            <span>保养</span>
                                        </div>
                                        <div class="des_listt">
                                            <div class="des_list_li2">
                                                <span>内容：</span>
                                                <span>{
       {info_some}}</span>
                                            </div>
                                            <div class="des_list_li2">
                                                <span>材料：</span>
                                                <span>{
       {info_some}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="data_des_list">
                                        <div class="des_list_li1">
                                            <span>2018-08-07</span>
                                            <span>2300公里</span>
                                            <span>保养</span>
                                        </div>
                                        <div class="des_listt">
                                            <div class="des_list_li2">
                                                <span>内容：</span>
                                                <span>{
       {info_some}}</span>
                                            </div>
                                            <div class="des_list_li2">
                                                <span>材料：</span>
                                                <span>{
       {info_some}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <transition name="fade">
                                        <template v-if="weibao_des_off">
                                            <div class="data_des_list">
                                                <div class="des_list_li1">
                                                    <span>2018-08-07</span>
                                                    <span>2300公里</span>
                                                    <span>保养</span>
                                                </div>
                                                <div class="des_listt">
                                                    <div class="des_list_li2">
                                                        <span>内容：</span>
                                                        <span>{
       {info_some}}</span>
                                                    </div>
                                                    <div class="des_list_li2">
                                                        <span>材料：</span>
                                                        <span>{
       {info_some}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </transition>
    
                                </div>
                                <div class="show_hide_info borderTop" @click="()=>this.weibao_des_off=!this.weibao_des_off">
                                    <span v-if="weibao_des_off">收起信息</span>
                                    <span v-else>显示全部</span>
                                    <img src="./imgs/up.png" v-if="weibao_des_off">
                                    <img src="./imgs/down.png" v-else>
                                </div>
                            </div>
                        </transition>
                    </div>
                    
                    
                    <div class="pictures">
                        <hr style='width:7.5rem;margin-left:-0.3rem;background-color:#E5E5E5;height:1px;border:none;'>
                        <div class="cxjl_show_hide clearfix" @click="()=>this.pic_off=!this.pic_off">
                            车辆照片
                            <img src="./imgs/upp.png" v-if="pic_off">
                            <img src="./imgs/dow.png" v-else>
                        </div>
                        <transition name="fade">
                            <div v-show="pic_off">
                                <div class="pic_list">
                                    <div class="pic_box">
                                        <img src="./imgs/pic45.png" alt="">
                                        <p class="over_title">左前45</p>
                                    </div>
                                    <div class="pic_box">
                                        <img src="./imgs/pic45.png" alt="">
                                        <p class="over_title">左前45</p>
                                    </div>
                                    <div class="pic_box">
                                        <img src="./imgs/pic45.png" alt="">
                                        <p class="over_title">左前45</p>
                                    </div>
                                    <div class="pic_box">
                                        <img src="./imgs/pic45.png" alt="">
                                        <p class="over_title">左前45</p>
                                    </div>
                                    <div class="pic_box">
                                        <img src="./imgs/pic45.png" alt="">
                                        <p class="over_title">左前45</p>
                                    </div>
                                    <div class="pic_box">
                                        <img src="./imgs/pic45.png" alt="">
                                        <p class="over_title">左前45</p>
                                    </div>
                                </div>
                                <div class="video_list" @click.stop="playVideo(index)" v-for="(item,index) in videoList">
                                    <video :id="'video'+index" :poster="item.posterItem" @play="playItem(index)" @pause="stopPause(index)">
                                        <source :src="item.url" type="video/mp4">
                                    </video>
                                    <div class="play_pause" v-show='item.playOff'><img src="imgs/play.png" alt="播放/暂停"></div>
                                    <div class="video_title" v-show='item.playOff'>{
       {item.title}}</div>
                                </div>
                            </div>
                        </transition>
    
                        <hr style='width:7.5rem;margin-left:-0.3rem;background-color:#E5E5E5;height:1px;border:none;'>
                    </div>
                    
                </div>
            </div>
        </div>
        <script>
    
            var App = new Vue({
                el: '#app',
                data: {
                    head_show_hide: false,
                    cxjl_show_hide: false,
                    cxjl_info_off: false, //出险记录的详细信息显示
                    //维保
                    weibao_all_off: false,
                    weibao_des_off: false,
                    //照片
                    pic_off: false,
                    playIcon_off: true,
    
                    //视频data
                    videoList: [
                        {
                            title: '绕车视频',
                            url: 'ckin.mp4',
                            posterItem: 'imgs/ckin.jpg',
                            playOff: true,
                        },
                        {
                            title: '内部视频',
                            url: 'ckin.mp4',
                            posterItem: 'imgs/timg.jpg',
                            playOff: true,
                        },
                        {
                            title: '发动机视频',
                            url: 'ckin.mp4',
                            posterItem: 'imgs/ckin.jpg',
                            playOff: true,
                        },
                        {
                            title: '内饰视频',
                            url: 'ckin.mp4',
                            posterItem: 'imgs/timg-1.jpg',
                            playOff: true,
                        },
                    ],
                    info_some: '占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符',
                },
                watch: {
                    cxjl_show_hide(val, oval) {
                        console.log(val)
                        if (!val) {
                            this.cxjl_info_off = false;
                        }
                    },
                    weibao_all_off(val, oval) {
                        if (!val) {
                            this.weibao_des_off = false;
                        }
                    }
                },
                methods: {
                    playVideo(index) {
                        let vdIndex = 'video' + index;
                        var myVideo = document.getElementById(vdIndex);
                        if (myVideo.paused) {
                            let tagVd = document.getElementsByTagName('video');
                            for (let i = 0; i < tagVd.length; i++) {
                                tagVd[i].pause();
                            }
                            myVideo.play();
                            this.videoList[index].playOff = false;
                            myVideo.controls = true;
                        } else {
                            let tagVd = document.getElementsByTagName('video');
                            for (let i = 0; i < tagVd.length; i++) {
                                tagVd[i].pause();
                            }
                            myVideo.pause();
                            // myVideo.controls = false;
                        }
                    },
                    playItem(index) {
                        console.log(index)
                        let tagVd = document.getElementsByTagName('video');
                            for (let i = 0; i < tagVd.length; i++) {
                                if(i!=index){
                                    tagVd[i].pause();
                                }
                            }
                    },
                    stopPause(index) {
                        console.log("stop"+index)
                    }
                }
            })
    
    
        </script>
    </body>
    
    </html>