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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/csl125/article/details/84199827
<!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/[email protected]/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">
                <!-- 出险记录 begin-->
                <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>
                <!-- 出险记录 end -->
                <!-- 维保记录 begin-->
                <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">
                                <!-- 维保list begin-->
                                <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>
                                <!-- 维保list end-->
                                <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>
                <!-- 维保记录 end-->
                <!-- 车辆照片 begin -->
                <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>
                <!-- 车辆照片 end -->
            </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>

猜你喜欢

转载自blog.csdn.net/csl125/article/details/84199827