Vue 视频播放与暂停

使用的是easyPlayer插件,embed设置展示图片没找到方法,videoPlayer不知道怎么回事只能展示一个视频。

    <template>
 <div class="noUrl">
<EasyPlayer
          :videoUrl="showUrl + item.uuid"//视频流
          :poster="potorimg + item.uuid"//展示图片
          :autoplay="false"
          :controls="true"
          show-custom-button="true"
          :ref="'easyPlayer' + index"
        ></EasyPlayer>
<div
          :class="[
            playList.indexOf('easyPlayer' + index) == -1 ? 'play' : 'stop',
          ]"
          @click="playVideo('easyPlayer' + index)"
        ></div>
</div>
</template>
<script>
import EasyPlayer from "@easydarwin/easyplayer";
export default {
  components: {
    EasyPlayer,
  },
  data() {
 potorimg:
        process.env.VUE_APP_SERVER_GATEWAY_URL +
        "/aiMultimedia/monitoringData/getVideoPreview?uuid=",
      showUrl:
        process.env.VUE_APP_SERVER_GATEWAY_URL +
        "/aiMultimedia/monitoringData/getVideoAudio?uuid=",
      playList: [],
},
methods: {
    playVideo(player) {
      let [player_] = this.$refs[player];
      if (this.playList.indexOf(player) == -1) {
        this.playList.push(player);
        player_.$el.getElementsByClassName("video-js")[0].play();
      } else {
        this.playList.splice(this.playList.indexOf(player), 1);
        player_.$el.getElementsByClassName("video-js")[0].pause();
      }
    },
}
<style scoped lang="scss">
    .noUrl {
      height: 100%;
      width: 100%;
      position: relative;
      background: url("./assets/realtime/videoPubFirst.png") no-repeat;//背景图
      background-size: 100% 100%;
      .play {
        height: 1.77vw;
        width: 1.77vw;
        position: absolute;
        top: calc(45% - 0.89vw);
        left: calc(50% - 0.89vw);
        background: url("./../public/icon-play.png") no-repeat;//播放按钮
        background-size: 100% 100%;
        z-index: 1;
        cursor: pointer;
      }
      .stop {
        height: 1.77vw;
        width: 1.77vw;
        position: absolute;
        top: calc(45% - 0.89vw);
        left: calc(50% - 0.89vw);
        background: url("./public/icon-stop.png") no-repeat;//暂停按钮
        background-size: 100% 100%;
        z-index: 1;
        cursor: pointer;
      }
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值