taimed/components/video-player/video-player.vue

<template>
	<view>
		<yb-video
      ref="video" title="测试视频" height="auto"
      autoplay
      render-type="renderjs"
      :crossOrigin="crossOrigin"
      :src="src"
      :workIndex="workIndex"
      :custom="custom"
      header
      controls
      exitDirection="portrait"
      object-fit="contain"
      @destroyed="handleDestroyed"
      @workchange="handleWorkChange"
      @loadedmetadata="handleLoaded"
      @timeupdate="handleTimeUpdate"
    />
	</view>
</template>

<script>
	// import YbPlayer from '@/libs/yb-player.js'
  // import YbVideo from '../yingbing-video/components/yb-video/yb-video.vue'
	export default {
    // components: {
    //   YbVideo
    // },
		data () {
			return {
				src: '',
				currentTime: 0,
				three: '',
				crossOrigin: '',
				danmu: [],
				quality: [],
				works: [],
				workIndex: 0,
				custom: {
          //自定义插槽
          slots: [{
              innerHTML: '<div class="fast-progress-btn" style="left:15%;">-15s</div>',
              followControls: true,
              click: () => {
                this.$refs.video.seek(this.currentTime - 15)
              }
          },{
              innerHTML: '<div class="fast-progress-btn" style="right:15%;">+15s</div>',
              followControls: true,
              click: () => {
                this.$refs.video.seek(this.currentTime + 15)
              }
          }],
					header: {
						disableMore: true,//关闭展示更多按钮
					},
          controls: {
            disableDanmuSend: true,//关闭弹幕发送按钮
            disableDanmuVisible: true,//关闭弹幕显示和隐藏按钮
          },
					progress: {
						rightSlots: []
					},
				},
				text: ''
			}
		},
    computed() {
      this.changeSrc(3)
    },
		methods: {
      handleTimeUpdate (time) {
        this.currentTime = time
      },
			changeSrc (index) {
				var arr = [
					'/static/video/test-360.mp4',//如果网页开启了/h5/的前缀，就需要加上这个/h5/
					'https://v2-zj-scct.kwaicdn.com/upic/2025/08/14/20/BMjAyNTA4MTQyMDEwMDVfMzc5NDk1NDg1Nl8xNzIzNjYyNjIwNDdfMF8z_b_B92c62e9609ee404af820675b37447d6d.mp4?tag=1-1756166590-unknown-0-wo6mf8iejp-e4f1ab14369cda6a&provider=self&clientCacheKey=3x4mikyhc8uu4jk_b.mp4&di=b6859a4d&bp=14944&x-ks-ptid=172366262047&kwai-not-alloc=self-cdn&kcdntag=p:Sichuan;i:ChinaTelecom;ft:UNKNOWN;h:COLD;pn:kuaishouVideoProjection&Aecs=172.19.0.226&ocid=100000971&tt=b&ss=vps',
					'https://files2.changyou.com/vc/dj/2023/1115/loop2.ts',
					'https://ydtnt-jw.oss-cn-zhangjiakou.aliyuncs.com/jw-video/%E8%A7%86%E9%A2%91/%E8%8B%B1%E8%AF%AD/%E5%94%90%E8%BF%9F%E8%AF%8D%E6%B1%87%E7%9A%84%E9%80%BB%E8%BE%91%E5%8D%95%E8%AF%8D%E8%AF%BE/Unit1-1_batch.mp4'
				]
				this.quality = []
				for ( let i = 0 ; i < 3; i++ ) {
					this.quality.push({
						title: i == 0 ? '480p' : i == 1 ? '720p' : '1080p',
						src: arr[index],
						type: 'video'
					})
				}
				this.works = []
				for ( let i = 0 ; i < 10; i++ ) {
					this.works.push({
						title: '第' + (i + 1) + '集',
						src: arr[index]
					})
				}
				this.workIndex = 0
				this.three = index == 0 ? '360' : 'none'
				this.crossOrigin = index == 0 ? 'anonymous' : ''
				this.src = arr[index]
			},
			handleDestroyed () {
				uni.showToast({
					title: '视频已销毁',
					icon: 'none'
				})
				console.log('destroyed');
			},
			handleWorkChange (e) {
				this.src = e.detail.src
				this.$refs.video.showToast('由于测试切换链接和当前播放链接是同一个所以不会触发视频切换')
			},
			handleLoaded (e) {
				if ( e.type == 'init' ) {
					// this.loadDanmu()
				}
			},
			decimalToRgb (decimal) {
				var r = (decimal >> 16) & 255;
				var g = (decimal >> 8) & 255;
				var b = decimal & 255;
				return 'rgb(' + r + ',' + g + ',' + b + ')'
			},
			toggle () {
				this.$refs.video.toggle()
			},
			destroy () {
				this.$refs.video.unload()
			},
		}
	}
</script>

<style>
  ::v-deep .fast-progress-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #fff;
  }
</style>