[JavaScript] ビデオタグの設定と関連イベント:


1. ラベル構成:
タグ名 説明する
送信元 再生するパスアドレス
autoplay 自動的に再生するかどうか。デフォルト値は false (ブール値)
loop ループ再生するかどうか。デフォルト値は false (ブール値)
ミュートされた サイレント再生するかどうか。デフォルト値は false (ブール値)
初期時間 ビデオの最初の再生位置を秒単位で設定します (数値は ByteDance アプレットではサポートされていません)
duration ビデオの長さを指定します (ByteDance アプレットではサポートされていません、数値)
controls デフォルトの再生コントロールを表示するかどうか
ダンムリスト 弾幕リスト (ByteDance アプレット、ObjectArray ではサポートされていません)
私たちの息子-btn 弾幕ボタンを表示するかどうかは初期化中にのみ有効で変更できません(ByteDance アプレット、ブール値ではサポートされていません)
イネーブルダンム 弾幕を表示するかどうかは初期化中にのみ有効であり、変更できません (ByteDance アプレット、ブール値ではサポートされていません)
ページジェスチャー 非全画面モードで、明るさとサウンドの調整ジェスチャを有効にするかどうか (WeChat アプレット、H5、ブール値)
方向 フルスクリーンモードでのビデオの方向を設定します。ルールを指定しない場合、アスペクト比は独自に判断されます。有効な値は 0 (通常の半径方向)、90 (画面を反時計回りに 90 度)、- 90 (画面を時計回りに 90 度) (バイト ジャンプ アプレット、H5 はサポートされていません、ブール値)
進行状況を表示 設定されていない場合、幅が 240 より大きい場合にのみ表示されます (ByteDance アプレット、ブール値ではサポートされていません)。
全画面表示ボタン 全画面ボタンを表示するかどうか(Boolean)
ショープレイボタン 動画下部のコントロールバーに再生ボタンを表示するかどうか(ブール値)
show-enter-play-btn ビデオの途中に再生ボタンを表示するかどうか (ByteDance アプレットではサポートされていません、ブール値)
進行状況ジェスチャを有効にする 進行状況を制御するためのジェスチャを有効にするかどうか (ByteDance アプレットではサポートされていません、ブール値)
object-fit 動画のサイズが動画コンテナのサイズと異なる場合、ビューループの表示形式は include: include、fill: fill、cover (WeChat アプレット、ByteDance アプレット、H5、String)
ポスター 動画ジャケットの画像ネットワークリソースアドレスcontrols属性値がfalseの場合、ポスターの設定は無効となります(文字列)
ミュートボタンの表示 ミュートボタンを表示するかどうか(WeChatアプレット、ブール値)
タイトル 動画の標準周波数は全画面表示時に上部に表示されます(WeChatアプレット、文字列)
再生ボタンの位置 再生ボタンの位置 (WeChat アプレット、ByteDance アプレット、文字列)
プレイジェスチャーを有効にする 再生ジェスチャを有効にするかどうか、つまり、ダブルクリックして再生/一時停止を切り替えるかどうか (WeChat アプレット ブール値)
開いている場合は自動一時停止-ナビゲート 他のミニプログラムページにジャンプする際に、このページの動画を自動的に一時停止するかどうか (WeChat ミニプログラム ブール値)
vsスライドジェスチャー 他の WeChat ネイティブ ページにジャンプするときに、このページのビデオを自動的に一時停止するかどうか (WeChat アプレット ブール値)
vslide-gesture-in-fullscreen 非全画面モードで明るさと音量の調整ジェスチャを有効にするかどうか、および全画面モードで明るさと音量の調整ジェスチャを有効にするかどうか (WeChat アプレット ブール値)
広告ユニットID 動画の前に広告ユニットIDが掲載されます 詳細はオープン機能(WeChatミニプログラム文字列)をご覧ください
クローラー用ポスター 検索やその他のシナリオのビデオ カバー表示として使用されます。再生アイコンのないビデオ マップを使用することをお勧めします。ネットワーク アドレス (WeChat アプレット文字列) のみがサポートされます。
広告ユニットID WeChat Xiaocheng 字幕ビデオ プレポスト広告ユニット D、詳細については、オープン機能 [ビデオ プレポスト広告] (WeChat ミニ プログラム文字列) を参照してください。
2. イベント:
イベント 説明する
ロードスタート ブラウザが Web 上のメディア データの検索を開始します
進捗 ブラウザがメディア データを取得しています
つるす ブラウザはメディア データの取得を一時停止しますが、ダウンロード プロセスが正常に終了しません。
アボート ブラウザはすべてのメディア データをダウンロードする前にメディア データの取得を中止しましたが、これはエラーが原因ではありませんでした
エラー メディアデータの取得中にエラーが発生しました
空になった video 要素または audio 要素が配置されているネットワークが突然初期化されなくなる理由は 2 つ考えられます: 1. メディアの読み込みプロセス中に致命的なエラーが突然発生する 2. ブラウザがサポートされている再生形式を選択しているときに、読み込みメソッドがメディアをロードします
停滞した ブラウザがメディア データを取得しようとして失敗しました
play 即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay属性
pause 播放暂停,当执行了pause方式时触发
loadedmetadata 浏览器获取完毕媒体的时间长和字节数
waiting 播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧
canplay 浏览器能够播放媒体,但估计以当前的播放速率不能直接播放完毕,播放期间需要缓冲
canplaythrough 浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要进行缓冲
seeking seeking属性变为true,浏览器正在请求数据
seeked seeking属性变为false,浏览器停止请求数据
timeupdate 由于播放位置被改变,可能是播放过程中的自然改变,也可能是被人为的改变,或由于播放不能连续而发生的跳变
ended 播放结束后停止播放
ratechange defaultplaybackRate属性(默认播放速率)或playbackRate属性(当前播放速率)被改变
druationchange 播放时长被改变
volumechange volume属性(音量)被改变或muted属性(静音状态)被改变

在这里插入图片描述

三、案例:

(1)自动播放;
(2)监听播放完成,自动划到一下页再自动播放(从0开始播放);
在这里插入图片描述
在这里插入图片描述

おすすめ

転載: blog.csdn.net/weixin_53791978/article/details/132970029