vue+element模仿腾讯视频电影网站（二），增加视频播放详情页

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

一.前言

1. 本项目在线预览点击访问
2. 作者其他博客成品汇总预览点击访问
3. 接上一篇《vue+element模仿腾讯视频电影网站》

暂时源码并没有提供其他获取渠道私聊作者获取即可或通过博客后面名片添加作者很简单

二.设计思维

效果图固定头部以下可滚动
在这里插入图片描述

简介

专辑列表》全部

以上两个窗口采取element抽屉 来实现

官方截图
分为1、2、3、4、5总共五个主模块设计
![在这里插入图片描述](https://img-blog.csdnimg.cn/8a775e2662204888b50f8073c0feb1c3.png

三.实现

视频播放详情页通用头部

<template>
  <div style="font-size: 14px;display: flex;background-color: #0f0f1e;overflow: auto;">
    <div style="height: 50px;">
      <img src="../../../public/img/logo.jpg" style="height: 40px;margin: 10px 0 0 90px;cursor: pointer;" @click="homePage">
    </div>
    <div v-for="(item,index) in menus" :key="index" :class="'play-menu '+(menuIndex === index?'play-menu-active':'')" @click="selMenu(index)">
      {{item}}
    </div>
    <div class="my-play-search" style="flex: 1;text-align: right;">
      <el-input placeholder="斗罗大陆" v-model="input" style="width: 500px;margin: 10px 20px 0 0;" clearable>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div style="width: 330px;display: flex;margin-top: 5px;">
      <div style="line-height: 60px;margin-right: 20px;">
        <svg style="margin-top: 12px;" class="pointer svg_quick_icon svg_icon_vip" viewBox="0 0 26 26" width="26" height="26"><filter x="-17.4%" y="-16%" width="134.8%" height="132%" filterUnits="objectBoundingBox" id="__gradient_vip1"><feOffset 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.08 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><linearGradient x1="-4.4%" y1="3.5%" x2="58.5%" y2="104.9%" id="__gradient_vip2"><stop stop-color="#FFF1CC" offset="0%"></stop><stop stop-color="#FFCD45" offset="36.9%"></stop><stop stop-color="#FF7000" offset="100%"></stop></linearGradient><linearGradient x1="20.3%" y1="11.1%" x2="86.2%" y2="88.9%" id="__gradient_vip3"><stop stop-color="#FFF8E6" offset="0%"></stop><stop stop-color="#FFCD45" offset="44.5%"></stop><stop stop-color="#FF7000" offset="100%"></stop></linearGradient><linearGradient x1="0%" y1="35.6%" x2="50%" y2="94.2%" id="__gradient_vip4"><stop stop-color="#FFF1CC" offset="0%"></stop><stop stop-color="#FFCD45" offset="40.9%"></stop><stop stop-color="#FF7000" offset="100%"></stop></linearGradient><g filter="url(#__gradient_vip1)" transform="translate(2 1)" fill="none" fill-rule="evenodd"><path d="M18.2.1l-6.8 12h-.1L4.5 0h-4C.3.1 0 .5.3.8l10.7 19c.2.4.7.4.9 0L22.6.8c.1-.3 0-.7-.5-.7h-3.9z" transform="translate(0 3.4)" fill="url(#__gradient_vip2)" stroke="#FFF" stroke-opacity=".8" stroke-width=".2"></path><path d="M0 0l5.9 10.4L11.8 0z" transform="translate(5.5 3.4)" fill="url(#__gradient_vip3)" opacity=".3"></path><path d="M1.7 6.2L6 4.3l4.2 1.9 1.6-2.8v-.6-1.3-1c0-.2-.2-.4-.5-.4H11L6 2.4h-.2L.8.1H.6C.3.1 0 .3 0 .6v2.8l1.6 2.8z" transform="translate(5.5)" fill="url(#__gradient_vip4)" stroke="#FFF" stroke-opacity=".8" stroke-width=".2"></path></g></svg>
      </div>
      <div>
        <i class="el-icon-c-scale-to-original pointer" style="font-size: 30px;color: #c6c6c6;line-height: 50px;margin-right: 20px;"></i>
      </div>
      <div>
        <i class="el-icon-timer pointer" style="font-size: 30px;color: #c6c6c6;line-height: 50px;margin-right: 20px;"></i>
      </div>
      <div>
        <i class="el-icon-video-camera pointer" style="font-size: 30px;color: #c6c6c6;line-height: 50px;margin-right: 20px;"></i>
      </div>
      <div>
        <i class="el-icon-s-platform pointer" style="font-size: 30px;color: #c6c6c6;line-height: 50px;margin-right: 20px;"></i>
      </div>
      <div>
        <el-avatar icon="el-icon-user-solid pointer" style="margin-top: 5px;"></el-avatar>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        input: '',
        menuIndex: 2,
        menus:['精选','电视剧','电影','动漫','少儿','纪录片','游戏','云游戏','VIP会员','全部']
      };
    },
    mounted() {
    },
    methods: {
      selMenu(index){
        this.menuIndex = index;
      },
      homePage(){
        this.$router.push({path: '/index'});
      },
    }
  };
</script>

<style>
  .play-menu{
    margin: 0 10px;
    font-size: 15px;
    line-height: 60px;
    color: #FFFFFF;
    white-space: nowrap;
  }
  .play-menu:hover{
    cursor: pointer;
    color: #ff5c38 !important;
  }
  .play-menu-active{
    color: #ff5c38;
  }
  .but:hover{
    cursor: pointer;
    color: #ff0e0b !important;
  }
  .my-play-search .el-input__inner{
    background-color: #272735;
    border-color: #272735;
    color: #ffffff;
  }
  .my-play-search .el-input-group__append, .el-input-group__prepend{
    background-color: #ff5c38!important;
    color: #ffffff!important;
    border: none!important;
  }
  .my-play-search .el-input-group__append:hover{
    background-color: #ff0e0b !important;
  }
</style>

模拟电影数据

video:{
          name:'西行纪之暗影魔城',
          url:'https://video.699pic.com/videos/84/33/48/b_yNziFHXbwwXy1669843348.mp4',
          des:'《西行纪之暗影魔城》讲述了暗影魔城之主摩璎为控制唐三藏夺取永恒之火使用魔城能满足一切欲望的能力引出唐三藏心魔。最终唐三藏克服心魔重新觉醒他与徒弟们联手打败摩璎瓦解了祸害一方的魔城重新踏上了拯救天下苍生的旅途。'
        },
        tabIndex:'1',
        videos1:[
          {name:'西行纪之暗影魔城',label:'普通话',time:'01:16:02',cover:require('../../../public/img/zhuanji1.jpg')}
          ],
        videos2:[
          {name:'《西行纪之暗影魔城》终极预告唐三藏苏醒归来师徒合力燃战上古巨龙',label:'预',time:'01:31',cover:require('../../../public/img/zhuanji2.jpg')},
          {name:'《西行纪之暗影魔城》剧情预告西行小队师徒反目开打全员战力爆表',label:'预',time:'01:00',cover:require('../../../public/img/zhuanji3.jpg')},
        ],
        videos3:[
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
          {name:'西行纪之再见悟空',label:'独播',cover:require('../../../public/img/xilie1.jpg')},
        ],
        videos4:[
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
          {name:'西行纪之穷奇地洞',label:'独播',cover:require('../../../public/img/xilie2.jpg')},
        ],
        comments:[
          {nickname:'Peter',avatar:require('../../../public/img/avatar1.jpg'),vip:require('../../../public/img/comment_vip.png'),time:'6天前',ip:'广东',content:'国漫西游还是这悟空好看农药的就算了专门坑钱的',likeNum: 2,commentNum: 1,
            more:false,
            comments:[
              {nickname:'啊米个豆腐',vip:require('../../../public/img/comment_vip.png'),time:'01-19',ip:'北京',content:'魔婴死了这段记忆也没了也就是说唐三藏什么都不知道',likeNum: 3,commentNum: 0},
              {nickname:'四合电子',vip:require('../../../public/img/comment_vip.png'),time:'01-20',ip:'广东',content:'是不是电影啊',likeNum: 0,commentNum: 0},
              {nickname:'朕的天下',vip:require('../../../public/img/comment_vip.png'),time:'01-19',ip:'广西',content:'因为魔女死了花落了所有人失忆了。命运剧本安排好的。',likeNum: 1,commentNum: 0},
            ]
          },
          {nickname:'请叫我大叔',avatar:require('../../../public/img/avatar2.jpg'),vip:require('../../../public/img/comment_vip.png'),time:'8天前',ip:'福建',content:'好像不管什么影片都是打自己人的时候很厉害后面遇到敌人就打不过了',likeNum: 2,commentNum: 0,
            more:false,
            comments:[]
          },
          {nickname:'阳光下的饭团子🍙',avatar:require('../../../public/img/avatar3.jpg'),vip:require('../../../public/img/comment_vip.png'),time:'8天前',ip:'河南',content:'不想吹 两个字顶级',likeNum: 2,commentNum: 0,
            more:false,
            comments:[]
          },
          {nickname:'来句早安',avatar:require('../../../public/img/avatar3.jpg'),vip:require('../../../public/img/comment_vip.png'),time:'5天前',ip:'贵州',content:'唐三藏已经知道了后续结局为什么他还是把永恒之火交给了天界',likeNum: 0,commentNum: 0,
            more:false,
            comments:[]
          },
          {nickname:'Peter',avatar:require('../../../public/img/avatar1.jpg'),vip:require('../../../public/img/comment_vip.png'),time:'6天前',ip:'广东',content:'国漫西游还是这悟空好看农药的就算了专门坑钱的',likeNum: 2,commentNum: 1,
            more:false,
            comments:[
              {nickname:'啊米个豆腐',vip:require('../../../public/img/comment_vip.png'),time:'01-19',ip:'北京',content:'魔婴死了这段记忆也没了也就是说唐三藏什么都不知道',likeNum: 3,commentNum: 0},
              {nickname:'四合电子',vip:require('../../../public/img/comment_vip.png'),time:'01-20',ip:'广东',content:'是不是电影啊',likeNum: 0,commentNum: 0},
              {nickname:'朕的天下',vip:require('../../../public/img/comment_vip.png'),time:'01-19',ip:'广西',content:'因为魔女死了花落了所有人失忆了。命运剧本安排好的。',likeNum: 1,commentNum: 0},
            ]
          },
          {nickname:'请叫我大叔',avatar:require('../../../public/img/avatar2.jpg'),vip:require('../../../public/img/comment_vip.png'),time:'8天前',ip:'福建',content:'好像不管什么影片都是打自己人的时候很厉害后面遇到敌人就打不过了',likeNum: 2,commentNum: 0,
            more:false,
            comments:[]
          },
          {nickname:'阳光下的饭团子🍙',avatar:require('../../../public/img/avatar3.jpg'),vip:require('../../../public/img/comment_vip.png'),time:'8天前',ip:'河南',content:'不想吹 两个字顶级',likeNum: 2,commentNum: 0,
            more:false,
            comments:[]
          },
          {nickname:'来句早安',avatar:require('../../../public/img/avatar3.jpg'),vip:require('../../../public/img/comment_vip.png'),time:'5天前',ip:'贵州',content:'唐三藏已经知道了后续结局为什么他还是把永恒之火交给了天界',likeNum: 0,commentNum: 0,
            more:false,
            comments:[]
          },
        ],
        videosOfRank:[
          {name:'狙击之王暗杀',des:'疯批美人扛大狙',cover:require('../../../public/img/ranking1.jpg')},
          {name:'东北告别天团2',des:'笑星云集分分钟一个爆梗',cover:require('../../../public/img/ranking2.jpg')},
          {name:'大喜事',des:'许君聪爆笑追妻智斗巩汉林',cover:require('../../../public/img/ranking3.jpg')},
          {name:'天龙八部之乔峰传',des:'甄子丹致敬金庸经典武侠',cover:require('../../../public/img/ranking4.jpg')},
          {name:'暴走财神4',des:'财神孙越下凡寻童子助发家致富',cover:require('../../../public/img/ranking5.jpg')},
          {name:'狙击之王暗杀',des:'疯批美人扛大狙',cover:require('../../../public/img/ranking1.jpg')},
          {name:'东北告别天团2',des:'笑星云集分分钟一个爆梗',cover:require('../../../public/img/ranking2.jpg')},
          {name:'大喜事',des:'许君聪爆笑追妻智斗巩汉林',cover:require('../../../public/img/ranking3.jpg')},
          {name:'天龙八部之乔峰传',des:'甄子丹致敬金庸经典武侠',cover:require('../../../public/img/ranking4.jpg')},
          {name:'暴走财神4',des:'财神孙越下凡寻童子助发家致富',cover:require('../../../public/img/ranking5.jpg')},
        ],