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

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

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。この機能について聞いたとき、すぐに思いつきました。内心は緊張していましたが、少しだけ密かに嬉しくて、少し戸惑っていました。学ぶ姿勢を持って挑戦しましょう。

1. プラグインをインストールする

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

2. Main.jsはコンポーネントを導入する

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

3. コンポーネントを使用するページ

<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) {
 },
};
</スクリプト>

上記の src ビデオ アドレスは、特定のアドレス文字列に置き換えることも、背景アドレス文字列に置き換えることもできます。私の場合はチャプター ツリーなので、チャプター ID に関連付けました。

 /** クエリ部門ドロップダウンツリー構造*/
 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)
 },

4. 進捗状況の保存

次のステップは、ビデオの進行状況バーを保存することです。印刷すると、onPlayerTimeupdate でビデオの進行状況を取得できることがわかります。そのため、タイマーを使用して 3 秒ごとにデータのやり取りをトリガーします。

計算: {
 プレーヤー() {
  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 は、バックエンドと対話するためのカスタム メソッドです。 (自分で定義することもできます)

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

この時点で進行状況を保存できます。

4. 進捗回復

進行状況を復元したい場合は、ビデオを再生する前に保存した進行状況をビデオに設定する必要があります。印刷すると、playerReadiedが設定できることがわかります。

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

この時点で進行状況を復元でき、完了です。 。バックグラウンドインタラクションデータの要件が異なるため、コードは掲載されていません。

これで、vue-video-player breakpoint resume に関するこの記事は終了です。vue video player breakpoint resume に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue-video-player を使用してライブ放送を実現する方法
  • vue video と vue-video-player を使用してビデオを広める方法のチュートリアル
  • vue-video-player を vue のビデオプラグインとして使用する詳細な説明
  • vue-video-player ビデオプレーヤーの詳細設定
  • vue でビデオプラグイン vue-video-player を使用する例
  • vue ビデオ再生用の vue-video-player プラグインの使用方法
  • vue-video-player の使用感の詳しい説明(m3u8 対応)
  • m3u8 ビデオ ストリームを再生する vue-video-player の実装

<<:  MySQL 5.7.17 zip パッケージ バージョンを Windows 10 にインストールするチュートリアル

>>:  VMware14 に CentOS 7 をインストールするグラフィック チュートリアル

推薦する

Vue Element フロントエンドアプリケーション開発開発環境の準備

目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...

vue WatchとComputedの使用の概要

目次01. リスナーウォッチ(1)機能(2)特性と方法(3)監視対象(4)リスニングアレイ02. 計...

LinuxにNginxをインストールする詳細な手順

1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...

MySQL に配列を保存するサンプルコードと方法

多くの場合、ストアド プロシージャを作成するときに配列がよく使用されますが、MySQL ではストアド...

ローカルのMySQLをサーバーデータベースに移行する方法

Linux の scp コマンド (Windows では scp は使用できません) と、mysql...

Dockerイメージをプルしてバージョンを確認する方法

イメージのバージョンとタグを確認するには、docker hubで確認する必要があります。アドレスは次...

JavaScript 組み込みオブジェクトの概要

目次1. 組み込みオブジェクト2. 数学オブジェクト1. Mathオブジェクトの使用2. 指定された...

React-Dropzone をベースにアップロードコンポーネント機能を開発する (サンプルデモ)

今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...

プロジェクトに必須の 8 つの JavaScript コード スニペット

目次1. ファイル拡張子を取得する2. コンテンツをクリップボードにコピーする3. スリープ時間は何...

ユーザーエクスペリエンスの概要

最近では、ソフトウェアやウェブサイトのいずれの作業であっても、設計時に「ユーザー エクスペリエンス」...

Linux の運用と保守で netstat の代わりに ss コマンドを使用する方法

序文Linux サーバーを操作および管理するときに、最もよく使用されるコマンドの 1 つが nets...

ウィンドウ表示効果を実現するJavaScript

この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

HTML ページでコンテンツの選択、コピー、右クリックを防止する方法の詳細な説明

時には、Web ページに掲載されているコンテンツが悪意のある人物に盗用されるのを望まないため、Web...