最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。この機能について聞いたとき、すぐに思いつきました。内心は緊張していましたが、少しだけ密かに嬉しくて、少し戸惑っていました。学ぶ姿勢を持って挑戦しましょう。 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. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...
目次01. リスナーウォッチ(1)機能(2)特性と方法(3)監視対象(4)リスニングアレイ02. 計...
1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...
多くの場合、ストアド プロシージャを作成するときに配列がよく使用されますが、MySQL ではストアド...
Linux の scp コマンド (Windows では scp は使用できません) と、mysql...
イメージのバージョンとタグを確認するには、docker hubで確認する必要があります。アドレスは次...
MySQL DATE_ADD(date,INTERVAL expr type) 関数と ADDDA...
目次1. 組み込みオブジェクト2. 数学オブジェクト1. Mathオブジェクトの使用2. 指定された...
今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...
目次1. ファイル拡張子を取得する2. コンテンツをクリップボードにコピーする3. スリープ時間は何...
最近では、ソフトウェアやウェブサイトのいずれの作業であっても、設計時に「ユーザー エクスペリエンス」...
#include <asm/io.h> #define ioremap(cookie,...
序文Linux サーバーを操作および管理するときに、最もよく使用されるコマンドの 1 つが nets...
この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
時には、Web ページに掲載されているコンテンツが悪意のある人物に盗用されるのを望まないため、Web...