video.js重新设置src不生效问题

video.js播放视频,如果中途改变了视频源,用src切换时会出现不生效的现象,解决办法是,回收video标签,重新建一个video实例即可。

  initVideoPlayer(): void {
    // 销毁旧的播放器实例
    if (this.player) {
      this.player.dispose();
      this.player = null;
    }
    const videoContainer: any = document.getElementById('video-container');
    // 移除旧的 <video> 标签
    videoContainer.innerHTML = '';

    // 创建新的 <video> 标签
    const newVideoElement = document.createElement('video');
    newVideoElement.id = 'my-video';
    newVideoElement.className = 'video-js vjs-default-skin';
    newVideoElement.setAttribute('controls', '');
    newVideoElement.setAttribute('preload', 'auto');
    newVideoElement.style.width = '100%';
    newVideoElement.style.height = '72.5vh';
    videoContainer.appendChild(newVideoElement);
    //创建video节点
    this.player = videojs('my-video', {
      controlBar: {
        children: {
          // 添加自定义重播按钮
          replayButton: {
            name: 'ReplayButton',
          },
        },
        // 确保所有按钮都被显示
        playToggle: true, // 播放/暂停按钮
        volumePanel: true, // 音量控制面板
        currentTimeDisplay: true, // 当前时间显示
        timeDivider: true, // 时间分隔符
        durationDisplay: true, // 总时长显示
        remainingTimeDisplay: true, // 剩余时间显示
        progressControl: true, // 进度条控制
        liveDisplay: true, // 直播显示
        // playbackRateMenuButton: true, // 播放速率菜单按钮
        // chaptersButton: true, // 章节按钮
        // subtitlesButton: true, // 字幕按钮
        // captionsButton: true, // 字幕按钮
        // audioTrackButton: true, // 音频轨道按钮
        fullscreenToggle: true, // 全屏切换按钮
      },

      techOrder: ['html5', 'flvjs'],
      poster: 'assets/img/poster.png',
      flvjs: {
        mediaDataSource: {
          isLive: true,
          cors: true,
          withCredentials: false,
        },
      },
    });
    // this.player.on('error', (errType, errDetail) => {
    //   console.log('Player error>>>>>>>>>>>>>>>>>>>>>:', errType, errDetail);
    // });
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容