最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。この機能について聞いたとき、すぐに思いつきました。内心は緊張していましたが、少しだけ密かに嬉しくて、少し戸惑っていました。学ぶ姿勢を持って挑戦しましょう。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.17 zip パッケージ バージョンを Windows 10 にインストールするチュートリアル
>>: VMware14 に CentOS 7 をインストールするグラフィック チュートリアル
目次1. クライアントとサーバー間の通信方法2. クエリキャッシュ3. クエリ最適化処理4. クエリ...
CSS の位置属性は要素の配置タイプを指定し、上、下、左、右を使用して要素を具体的に配置します...
2つの小さな問題ですが、長い間私を悩ませていました。最初の質問テキストエリアの左側のテキストは常にテ...
一般的に、関数は実行する前に呼び出す必要があることはご存じのとおりです。以下に示すように、関数を定義...
目次序文1. 準備 - サーバーとnginxの使用1. サーバーを準備する2. nginxをインスト...
1. CDNこれは、Web サイト上で最もよく使用される加速機能です。分散サーバー レイアウトによ...
暫定的な応答を示し、要求者に操作の続行を要求するステータス コード。コードの説明100 (続行) リ...
MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...
目次構成解析サービス構築ディレクトリ構造ファイルを作成インスタンス構成サービスを開始するテストRed...
ある達人がかつて、自分の妻のことを知るのと同じくらい、自分が管理するデータベースのことを知るべきだと...
目次1. 基本を理解する2. システム環境を確認する3. ftpコマンドをインストールする[オプショ...
目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...
1. すべてのタグには対応する終了タグが必要です以前の HTML では、<p> や &l...
目次ブロックレベル関数オブジェクトのプロトタイプを直接変更すると呼び出された人発信者評価ブロックレベ...
序文ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である Wor...