vue做播放器和进度条-526互联

<template>
  <video-player
    class="video-player vjs-custom-skin"
    ref="videoPlayer"
    :playsinline="true"
    :options="playerOptions"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @seeking="videoSeeking" @seeked="videoSeeked" :events="['seeking','seeked']"
  >
  </video-player>
  <!-- <div class="progress-bar">
    <div class="progress-filled" :style="{width: progress + '%'}"></div>
  </div> -->

</template>
<script>
import { reactive, toRefs, onMounted ,ref} from 'vue'
export default {
  name: 'vueVideoPlayer',
  components: {},
  props: {
    videodata: String
  },
  emits: [],
  setup(props) {
   
    const state = reactive({
      VideoId:'',
      playerOptions: {
        //如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto',
        language: 'zh-CN',
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        // aspectRatio: '16:9',
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        sources: [
          {
            //类型
            type: 'video/mp4',
            //url地址
            src: props.videodata
          }
        ],
        poster: , //你的封面地址
        //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controls: true, // 是否显示控制栏
        controlBar: {
          timeDivider:false , //当前时间和持续时间的分隔符
          durationDisplay: false, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: false //全屏按钮
        },
        playtimes: '', //视频观看起点

      },
      videoPlayer:ref(""),
        progress:0,

        isSeeking: false,
        isVideoEnd:false
    })
    onMounted(() => {})
    const onPlayerPlay = ($event) => {
      document.getElementById($event.id_).getElementsByClassName("vjs-big-play-button")[0].style.display='none'
      const VideoId = window.localStorage.getItem('VideoId')
      if (VideoId&&VideoId!=$event.id_) {
        document.getElementById(VideoId).player.pause()
      }
      window.localStorage.setItem('VideoId', $event.id_)
    }
    const onPlayerPause = ($event) => {
      document.getElementById($event.id_).getElementsByClassName("vjs-big-play-button")[0].style.display='block'
    }
    // //视频底部播放进度条
    // const updateProgressBar = ()=>{
      
    //   console.log("====");
    //   // console.log("state.myVideo",state.videoPlayer);
    //   const video = state.videoPlayer
    //   // console.log(video.player.currentTime());
    //   // console.log(video.currentTime());
    //   // console.log(video.currentTime);
    //   const precentComplete = (video.player.currentTime()/video.player.duration())*100
    //   console.log("precentComplete",precentComplete);
    //   state.progress = precentComplete
    // }
		// 正在拖动
		const videoSeeking=(item)=> {
			this.isSeeking = true
		}
		// 拖动结束
		const videoSeeked=(item)=>{
			this.isSeeking = false
		}

    return {
      ...toRefs(state),
      onPlayerPlay,
      onPlayerPause,
      videoSeeking,
      videoSeeked,
    }
  }
}
</script>
<style lang="less">
//修改点击播放按钮
.vjs-custom-skin > .video-js .vjs-big-play-button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #ffffff;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  top: 3px;
}
.video-js.vjs-fluid {
  height: 100% !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .vjs-tech {
    object-fit: cover;
  }
}
.video-js.vjs-fluid {
  padding: 0;
}
.video-js .vjs-tech {
  width: unset;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.video-js .vjs-slider{
  cursor: default;
}
.video-js .vjs-progress-control{
  cursor: default;
}
</style>