vue-video-player でのブレークポイント再開の実装

npm インストール vue-video-player --save

'vue-video-player' から VideoPlayer をインポートします。
'video.js/dist/video-js.css' が必要です
'vue-video-player/src/custom-theme.css' が必要です
Vue.use(ビデオプレーヤー)

<el-tree :data="章オプション"
     :props="デフォルトプロパティ"
     ノードキー='id'
     ハイライト-現在
     :filter-node-method="filterNode"
     ref="木"
     デフォルトすべて展開
     @node-click="ハンドルNodeClick" />
<ビデオプレーヤーref="ビデオプレーヤー"
        クラス="ビデオプレーヤーvjsカスタムスキン"
        スタイル="幅: 1000px;高さ: 576px;表示: インラインフレックス"
        :playsinline="true"
        :options="プレイヤーオプション"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @play="onPlayerPlay($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @ready="プレイヤーの準備完了"
    />
<スクリプト>
'vue-video-player' から { videoPlayer } をインポートします。
'video.js/dist/video-js.css' をインポートします。
'vue-video-player/src/custom-theme.css' をインポートします。
「@/api//driver/videoChapter」から treeselect をインポートします。
「@riophae/vue-treeselect」から Treeselect をインポートします。
"@riophae/vue-treeselect/dist/vue-treeselect.css" をインポートします。
エクスポートデフォルト{
 名前: "videoPlayer",
 コンポーネント: { Treeselect, videoPlayer },
 データ（） {
 戻る {
  //ユーザー情報 user:{},
  //===============================
  一時停止: true、
  学習期間:
  userId: '', // ユーザーID
  chapterId:'', //章ID
  timeLog: '', //ビデオ視聴時間},
 
  プレイヤーオプション: {
  playbackRates: [0.5, 1.0, 1.5, 2.0], //再生速度 autoplay: false, // trueの場合、ブラウザは準備ができたときに再生を開始します。
  muted: false, // デフォルトではすべてのオーディオがミュートされます。
  loop: false, // ビデオが終了するとすぐに再開します。
  preload: 'auto', // <video> 要素が読み込まれた後にブラウザがビデオデータのダウンロードを開始するかどうかを提案します。自動 ブラウザは最適な動作を選択し、すぐにビデオの読み込みを開始します（ブラウザがサポートしている場合）。
  言語: 'zh-CN'、
  aspectRatio: '16:9', // プレーヤーを流動モードにして、プレーヤーの動的サイズを計算するときにこの値を使用します。値は比率を表す必要があります。つまり、コロンで区切られた 2 つの数値です (例: 「16:9」または「4:3」)。
  fluid: true, // true の場合、Video.js プレーヤーは流動的なサイズになります。つまり、コンテナーに合わせて比例して拡大縮小されます。
  出典:
   {
   type: 'video/mp4', // ここでは、基本的なビデオ形式、ライブ ブロードキャスト、ストリーミング メディアなど、多くのタイプがサポートされています。詳細については、git URL プロジェクトを参照してください。src: ''// URL アドレス}
  ]、
  hls: 本当、
  poster: '', // カバーアドレス width: document.documentElement.clientWidth, // プレーヤーの幅 notSupportedMessage: 'このビデオは現在再生できません。しばらくしてからもう一度お試しください', // Video.js がメディアソースを再生できない場合に表示されるデフォルトのメッセージを上書きできます。
  コントロールバー: {
   //現在の時刻と継続時間の区切り timeDivider: true,
   //表示期間durationDisplay: true,
   //残り時間を表示するかどうか function residualTimeDisplay: false,
   //全画面ボタン fullscreenToggle: true
  }
  }
 };
},
計算: {
 プレーヤー() {
  return this.$refs.videoPlayer.player //カスタム再生}
 },
マウントされた（）{
 this.timer = setInterval(this.putLearningObj, 3000)
 },
破壊された（）{
 // タイマーが実行中の場合はオフにします if (this.timer) {
  クリア間隔(this.timer)
  }
 },
メソッド: {
 //ユーザー情報 getUser() {
  getUserProfile().then(応答 => {
  this.user = レスポンスデータ;
  this.learningDuration.userId = this.user.userId
  });
 },
  //============================
 全画面表示（） {
  const プレーヤー = this.$refs.videoPlayer.player
  player.requestFullscreen() //フルスクリーンAPIメソッドを呼び出す player.isFullscreen(true)
  プレイヤー.再生()
 },
 onPlayerPlay(プレイヤー) {
  this.paused = false
  // プレーヤー.再生()
 },
 onPlayerPause (プレイヤー) {
  this.paused = true
  // console.log('onPlayerPause!', プレイヤー)
 },
 onPlayerEnded (プレイヤー) {
  this.paused = false;
  // clearInterval(this.timer);
 },
 //現在の再生位置が変更されたときにトリガーされます。
 onPlayerTimeupdate (プレイヤー) {
  // console.log('onPlayerTimeupdate!', this.timeLog) を実行します。
 },
 /* ビデオの進行状況を設定します */
 playerReadied: 関数 (player) {
 },
};
</スクリプト>

 /** クエリ部門ドロップダウンツリー構造*/
 getTreeSelect() {
  treeselect().then((レスポンス) => {
  //カバー var img = '';
  this.ChapterOptions = レスポンス.data;
  (i = 0 とします; i < this.ChapterOptions.length; i++) {
   this.videoName = this.ChapterOptions[0].children[0].chapterName
   this.videoIntroduce = this.ChapterOptions[0].children[0].chapterIntroduce
   this.VideoUrl = JSON.parse(this.ChapterOptions[0].children[0].videoAddress)
   img = JSON.parse(this.ChapterOptions[0].children[0].imageAddress)
   //カバーを初期化する for (let j = 0; j <img.length; j++) {
   this.playerOptions.poster =img[0];
   }
   //最初の章のビデオを初期化します for (let j = 0; j <this.VideoUrl.length; j++) {
   this.playerOptions.sources[0].src = this.VideoUrl[0]
   }
   //章を初期化します this.learningDuration.chapterId = this.ChapterOptions[0].children[0].id;
   // デフォルトのハイライト最初の章ノード this.$nextTick(()=>{
   this.$refs.tree.setCurrentKey(this.ChapterOptions[0].children[0].id);
   })
  }
  });
 },
 // フィルターノード filterNode(value, data) {
  if (!value) が true を返す;
  data.label.indexOf(値) !== -1 を返します。
 },
 // ノードクリックイベント handleNodeClick(data) {
  // コンソール.log(データ)
  var img = '';
  // 元のビデオ、元のカバーを更新します this.playerOptions.sources[0].src = '';
  this.playerOptions.poster = '';
  //ビデオを変換します this.VideoUrl = JSON.parse(data.videoAddress);
  // console.log("this.VideoUrl")
  (i = 0 とします; i < this.VideoUrl.length ; i++) {
  this.playerOptions.sources[0].src = this.VideoUrl[0];
  }
  img = JSON.parse(data.imageAddress);
  (i = 0 とします; i < img.length ; i++) {
  this.playerOptions.poster = img[0];
  }
  // console.log("this.playerOptions.sources[0].src")
  // コンソールログ(this.playerOptions.sources[0].src)
  // 章の紹介 this.videoIntroduce = data.chapterIntroduce;
  //チャプター名 this.videoName = data.chapterName;
  //章ID
  this.learningDuration.chapterId = データ.id
  // console.log(this.videoIntroduce)
 },

計算: {
 プレーヤー() {
  return this.$refs.videoPlayer.player //カスタム再生}
 },
 マウントされた（）{
 this.timer = setInterval(this.putLearningObj, 3000)
 },
 破壊された（）{
 // タイマーが実行中の場合はオフにします if (this.timer) {
  クリア間隔(this.timer)
  }
 },
メソッド: {  
学習オブジェクトを置く() {
  一時停止した場合
  //ビデオの進行状況を保存する saveTime(this.learningDuration)
  console.log('putLearningObj ~~~~~~~~~~')
  }
 },
//現在の再生位置が変更されたときにトリガーされます。
onPlayerTimeupdate (プレイヤー) {
 this.learningDuration.timeLog = player.cache_.currentTime
  // console.log('onPlayerTimeupdate!', this.timeLog) を実行します。
 },
},

// ビデオの進行状況を保存するエクスポート関数 saveTime(data) {
 リクエストを返す({
 URL: '/***/****/***/',
 メソッド: 'put'、
 データ: データ
 })
}

/* ビデオの進行状況を設定します */
playerReadied: 関数 (player) {
//ここでバックグラウンドインタラクションメソッドを呼び出すことができます...
player.currentTime(this.learningDuration.timeLog)
},