video標籤 播放器的使用，列表播放的使用
阿新 • • 發佈：2018-11-19
<!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>