src/components/mini/box14-video.vue

@@ -1,248 +1,294 @@
<style lang="less" scoped>
   .videoBoxList {
      display: flex;
      // justify-content: space-evenly;
      flex-wrap: wrap;
      // align-content:flex-start;
      min-height: 700px;
      align-items: stretch;
   }

   .myVideo {
      position: relative;
      // width: 220px;
      // height: 140px;
      width: 300px;
      height: 180px;
      background-color: #565656;
      border-radius: 10px;
      margin: 10px;
      display: flex;

      .face {
         z-index: 1;
      }

      img {
         max-width: 100%;
      }
   }


   .myVideo:hover {
      .mark {
         background-color: #000;
         display: initial;
      }

      .player-video-state {
         // display: initial;
      }
   }




   .dplayer {
      width: 500px;
   }

   .mark {
      opacity: 0.45;
      width: 100%;
      height: 100%;
      position: absolute;
      display: none;
   }

   .player-video-state {
      // position: absolute;
      left: 43%;
      top: 35%;
      width: 50px;
      height: 50px;
      display: none;
   }
</style>

<template>
   <div>
      <div class="videoBoxList">
         <div class="myVideo" v-for=" (temp,index) in ['test1','test2','test3','test4','test5']">
            <div :id="temp" :ref="temp" class="dplayer"></div>
            <!-- <div class="mark" ></div> -->
            <!-- <img src="qq.png"> -->
            <!-- 视频 -->
            <div class="player-video-state">
               <span class="bp-svgicon">
                  <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink">
                     <defs>
                        <path id="pid-1-svgo-a" d="M0 0h80v80H0z"></path>
                        <path
                           d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z"
                           id="pid-1-svgo-d"></path>
                        <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%"
                           filterUnits="objectBoundingBox" id="pid-1-svgo-c">
                           <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
                           <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1">
                           </feGaussianBlur>
                           <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"
                              in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
                           <feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
                           <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2"
                              result="shadowBlurOuter2">
                           </feGaussianBlur>
                           <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
                              in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
                           <feMerge>
                              <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                              <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
                           </feMerge>
                        </filter>
                     </defs>
                     <g fill="none" fill-rule="evenodd" opacity=".8">
                        <mask id="pid-1-svgo-b" fill="#fff">
                           <use xlink:href="#pid-1-svgo-a"></use>
                        </mask>
                        <g mask="url(#pid-1-svgo-b)">
                           <use fill="#000" filter="url(#pid-1-svgo-c)" xlink:href="#pid-1-svgo-d"></use>
                           <use fill="#FFF" xlink:href="#pid-1-svgo-d"></use>
                        </g>
                     </g>
                  </svg>
               </span>
            </div>
         </div>
   <div class="fade">
      <div class="mySecretSamll" v-if="data==null|| data.length==0">
         <p>
            <a-icon type="delete" /> 空空如也..
         </p>
      </div>
      <div class="gridClass">
         <div class="entry-preview" v-for="item in data">
            <div class="thumbnail_box" @click="showMyVideo(item)">
               <div class="thumbnail">
                  <img :src="item.coverFileURL" alt="" loading="lazy" :onerror="img404">
               </div>
            </div>
            <div class="entry-post">
               <div class="entry-header">
                  <h5 class="entry-title">
                     <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
                        {{item.title}}
                     </router-link>
                     <!-- {{item.title}} -->
                  </h5>
                  <div class="post_content">
                     {{item.introduce}}
                  </div>
               </div>
               <div class="entry-meta">
                  <div class="post-categories">
                     <span class="tag vcard">
                        <a-icon type="customer-service" />
                        <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
                     </span>
                     <!-- <span class="tag-list">
                        <a href="#" rel="tag">影评</a>
                        <a href="#" rel="tag">电影</a>
                        <a href="#" rel="tag">蜘蛛侠</a>
                     </span> -->
                  </div>
                  <div class="post-on">
                     <span class="entry-date">
                        <a-icon type="calendar" />
                        <a href="#" rel="bookmark">
                           {{item.publishDate}}
                        </a>
                     </span>
                  </div>
               </div>
            </div>

         </div>

      </div>
      <a-row type="flex" justify="center">
         <div>
            <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
               :defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
         </div>
      </a-row>
   </div>
</template>

<script>
   import Hls from 'hls.js'
   import DPlayer from 'dplayer'
   import {
      queryBlogArticleList
   } from '../../api/blogArticle.js'

   import myConstant from "../../config/myConstant.js"

   export default {
      data() {
         return {
            dp: null,
            video: {},
            video1: {},
            video2: {},
         }
      },
      methods: {
         myPlay() {
            this.$message.info("start play..")
         },
         loadVideo(videoInfo, index) {
            this.dp = new DPlayer({
               element: document.getElementById(index),
               //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
               // hotkey: true, // 是否支持热键，调节音量，播放，暂停等
               mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
               theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
               loop: false, // 是否自动循环
               lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
               // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
               preload: "auto", // 自动预加载
               volume: 0.1, // 初始化音量
               playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
               contextmenu: [
                  //  自定义上下文菜单
                  // 右键菜单
                  {
                     text: "b站",
                     link: "https://www.bilibili.com"
                  },
                  {
                     text: "选项二",
                     click: player => {
                        console.log(player);
                     }
                  }
               ],
               highlight: [
                  //进度条上的自定义时间标记
                  // 进度条时间点高亮
                  {
                     text: "10M",
                     time: 60
                  },
                  {
                     text: "20M",
                     time: 120
                  }
               ],
               video: {
                  pic: videoInfo.img, // 视频封面
                  url: videoInfo.url,
                  type: videoInfo.type,
                  customType: {
                     customHls: function(video, player) {
                        const hls = new Hls()
                        hls.loadSource(video.src)
                        hls.attachMedia(video)
                     }
                  }
               }
            })
            page: {
               size: "small",
               total: 1,
               pageSize: 6,
               current: 1,
               defaultPageSize: 6
            },
            data: [],
            img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"",
         }
      },
      mounted() {
         this.video1 = {
            img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
            url: "http://t.inleft.com/share/myVideo/faye/faye.m3u8",
            type: "customHls"
         this.onChange(this.page.current);
      },
      methods: {
         onChange(current) {
            this.page.current = current;
            queryBlogArticleList({
               pageNo: current,
               pageSize: this.page.pageSize,
               fileType: myConstant.fileTypeVideo
            }).then((res) => {
               this.page.total = Number(res.data.total)
               this.page.pageSize = Number(res.data.size);
               this.data = res.data.records;
               return res
            })
         },
         showMyVideo(item) {
            this.$emit('showMyVideo', {
               id: item.id,
               isAllowedComment: item.isAllowedComment,
               introduce: item.introduce,
            })
         }
         this.video2 = {
            img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
            url: "http://t.inleft.com/share/myVideo/canon/canon.m3u8",
            type: "customHls"
         }
         this.video3 = {
            img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
            url: "http://t.inleft.com/share/mp3/EOPMusic%283%29.mp3",
            type: "normal"
         }
         this.video4 = {
            img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
            url: "http://t.inleft.com/share/mp3/EOPMusic%284%29.mp3",
            type: "normal"
         }
         this.video5 = {
            img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
            url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
            type: "normal"
         }

         // getVideo: ajax request for getting videoInfo
         /*   getVideo().then(res => {
             this.video = res.data.video
             this.laodVideo(this.video)
           }) */
         this.video = {
            //封面
            //img: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg",
            img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
            // video: "https://vod3.bdzybf3.com/20210509/ZMHA3RpS/1000kb/hls/index.m3u8",
            // video: "http://t.inleft.com/share/ckplayer/ckplayer-master/sample/test/video_tieba.m3u8",
            // video: videoUrl,
            // video: "http://t.inleft.com/share/mp3/inleft-test-20211103-rainbow.mp3",
         }
         this.loadVideo(this.video1, "test1")
         this.loadVideo(this.video2, "test2")
         this.loadVideo(this.video3, "test3")
         this.loadVideo(this.video4, "test4")
         this.loadVideo(this.video5, "test5")

         // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
         // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
         document.querySelector(".dplayer-mask").remove();
         document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
         let length = document.querySelectorAll(".dplayer-menu-item").length;
         document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
         document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
      }
   }
</script>
<style lang="less">
   @--border-radius: 16px;
   @--s-background: 16px;
   @--animation-mo: margin 1s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards, opacity .75s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards;

   @font-face {
      font-family: "iconfont";
      /* Project id 2762112 */
      src: url('http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/iconfont.woff2') format('woff2');
   }

   .gridClass {
      grid-template-columns: repeat(4, 1fr);
      display: grid;
      clear: both;
      gap: 2rem;
      padding-bottom: 20px;
      // background-color: #666;
      user-select: none;

      a {
         color: #555;
      }

      .item1 {
         grid-column-start: 1;
         grid-column-end: 3;
      }

      .entry-preview {
         border-radius: @--border-radius;
         background: @--s-background, white;
         animation: @--animation-mo;
         transition: all .5s;
         box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05);
         // background-color: red;

         display: flex;
      }

      .thumbnail_box {
         width: 50%;
         min-width: 50%;
         left: 0;

         .thumbnail {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: @--border-radius;
            overflow: hidden;
            background: rgba(0, 0, 0, .05);

            img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               transform: scale(1.1);
               transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
               border-radius: @--border-radius;
            }
         }
      }

      header {
         display: block;
      }

      .entry-title,
      .post_content {
         margin: 0 0 .5rem 0;
      }

      h5 {
         font-size: 1.05rem;
      }

      .entry-meta,
      .post_content {
         opacity: .6;
      }

      .post_content {

         display: -webkit-box;
         overflow: hidden;
         -webkit-box-orient: vertical;
         /* autoprefixer: off */
         -webkit-line-clamp: 4;
         /* autoprefixer: on */
      }

      .entry-preview .entry-meta {
         display: flex;
         font-size: .5rem;
         padding: .5rem 0 0 0;
         flex-wrap: wrap;
      }

      .vcard {
         margin: 0 1em 0 0;
      }

      .entry-post {
         padding: 1rem;
         transition: all .5s;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         // height: 100%;
         // padding: calc(70% + 1rem) 1rem 1rem 1rem;

      }

      .tag-list a {
         margin: 0 .5em 0 0;
         font-size: 14px;
      }
   }

   .thumbnail_box:hover .thumbnail img {
      transform: scale(1) translate3d(0, 0, 0);
      filter: blur(10px) brightness(.8);
   }

   .thumbnail_box:hover .thumbnail:after {
      width: 100%;
      height: 100%;
      opacity: 1;
   }

   .thumbnail:before {
      content: "\ec2a";
      opacity: .1;
      font-size: 3rem;
   }

   .thumbnail:after {
      width: 70%;
      border: 1px solid rgba(255, 255, 255, .75);
      opacity: 0;
      height: 70%;
      transition: all .5s;
      z-index: 2;
      color: white;
      border-radius: @--border-radius;
      content: "\e627";
      font-size: 1rem;
      text-shadow: 0 1px 5px rgb(0 0 0 / 30%);
   }

   .thumbnail:before,
   .thumbnail:after {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'iconfont';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
   }

   @media screen and (min-width:768px) {
      .gridClass {
         grid-template-columns: repeat(2, 1fr);
      }
   }
	
   @media screen and (max-width:767px) {
      .gridClass {
         grid-row-gap: 2rem;
         grid-column-gap: 0rem;
         grid-template-columns: repeat(1, 1fr);
	
         .entry-preview {
            display: block;
         }
	
         .thumbnail_box {
            min-width: 100%;
         }
      }
   }
</style>