WeChat ミニ プログラム (コンポーネント – メディア)
概要
一般的なメディア コンポーネント
①オーディオ オーディオ コンポーネント
②カメラ システム カメラ コンポーネント
③イメージ ピクチャー コンポーネント
④ビデオ ビデオ コンポーネント
メディア コンポーネント - オーディオ
オーディオ コントロール
注: バージョン 1.6.0 以降、このコンポーネントはメンテナンスされなくなりました. より強力な wx.createInnerAudioContext インターフェイスを使用することをお勧めします.これは、コースの後半で導入されます.
ケース:
ケース レンダリング結果: 
mp3 音楽 外部リンク: http://www.333ttt.com/up
audio オーディオ属性リスト - 基本属性
audio オーディオ プロパティ リスト — イベント バインディング プロパティ
オーディオ オーディオ コントロール、再生ボタンと一時停止ボタンの追加
スタイルレンダリング結果
オーディオ オーディオ コントロール
ステップ 1: オーディオ コンテキスト インスタンスを取得し、変数にバインドしますステップ 2: オーディオ
コンテキスト インスタンスを介して対応するオーディオ
オーディオ オーディオ コントロールを操作し、その他の関数を追加します
. たとえば: 現在の再生時間関数を設定します.
この時点で、ボタンをクリックすると、10 秒目にすばやくジャンプします. seek メソッドに渡されたパラメータが 0 の場合、オーディオの先頭にジャンプします.
現在の再生時間を
オーディオ イベント バインディング属性の検証の開始として設定します
bindplay start + bindpause pause
このとき、再生と一時停止をクリックすると、bindplay と bindpause イベント属性がそれぞれ処罰され、他の検証方法も同様です
メディア コンポーネント - ビデオ
ビデオ コントロール
注: 関連する API は wx.createVideoContext です。つまり、wx.createVideoContext を使用してビデオ コンテキスト コンテキストを取得します。
ケース
案例：
视频链接
http://v3-tt.ixigua.com/60efde9fef74549a71e491db7a9c43bd/5d6bb458/video/m/22078ee8869810d4363998a03f6ebe11195116224a0400005451fa55e7f3/?a=1768&br=317&cr=0&cs=0&dr=0&ds=2&er=&l=2019090119054601015504613931016&lr=&rc=anBvOGw3Zjc5bTMzZ2kzM0ApaWU2OzM7OmVoN2Y6PDs5NWdiNDJwbmhlYmdfLS1jLjBzczNgYV4uNDBgX2AxNl4yY146Yw%3D %3D
ビデオ ビデオ アトリビュート リスト：基本アトリビュート
次に、上記の基本的な属性を
順番に検証します.このとき、検証の結果、ビデオが 30 秒から始まる、ループするなどのことがわかります..有効になります
ビデオ ビデオ アトリビュート リスト—コントロール アトリビュート
備考: 多くのアトリビュートは無効であり、公式はまだそれらを修正していません。スキップしてください。
ケース: show-mute-btn ミュート ボタン アイテム
を確認する
ビデオ ビデオ属性リスト — ブレット チャット属性
バレットチャット属性の大文字と小文字の検証:
関連属性: danmu-list: バレットチャットリスト、enable-danmu: バレットチャットを表示するかどうか、danmu-btn: バレットチャットボタンを表示するかどうか、controls: ビデオコントロールを表示するかどうか
Step 1:動画画面で、danmu-listを使ってバレットチャットの内容や文字色、出現時間を設定できます
次にバレットチャットの送信方法を紹介します
この時点でバレットチャットは送信されていますが、まだ問題があります: ブレット チャットのフォントの色です。すべて白なので、次に弾幕にランダムな色を追加します。
Step 1: ランダムカラー機能をレジスタ外にカプセル化
Step 2: バレットチャット送信時にランダムカラーを呼び出す
この時点で、バレットチャットの表示と送信が実現されます。
ビデオ ビデオ アトリビュート リスト：その他の操作アトリビュート
注: 一部の属性は無効であり、公式のバグは解決されていません。
メディア コンポーネント - 画像
[画像] タブ
注: 画像は、JPG、PNG、SVG 形式をサポートしています。
キーワード:
IOS 画像の塗りつぶしモード ScaleToFill、ScaleAspectFit、ScaleAspectFill、widthFix
IOS 画像のトリミング モード 上、下、左、右、中央、左上、右上、左下、右下。
<image></image>— 画像タグ属性
<image></image>--mode スケーリング モード属性値
<image></image>--mode クリッピング モード属性値
<image></image>イメージ タグ モードの属性値の検証
共通の属性値の要約:
①UIViewContentModeScaleToFill 画像はコントロールのサイズで塗りつぶされます (例として、楕円を変形します) ②UIViewContentModeScaleAspectFit
画像は独自の縦横比で塗りつぶされ、残りのスペースは透明です (変形されません)
③UIViewContentModeScaleAspectFill拡大・縮小と同じように画像全体が表示されない 一部を表示する
注意：
①画像コンポーネントのデフォルトの幅は300px、高さは225px
②画像コンポーネント内のQRコード・小さなプログラムコードの画像は長押しに対応していません認識。長押し認識は wx.previewImage でのみサポートされています
メディア コンポーネント - カメラ
<camera></camera>カメラ タブ
システム カメラ、QR コード スキャン機能、WeChat クライアントを 6.7.3 にアップグレードする必要があります。scope.camera にはユーザー認証が必要です。
関連 API: wx.createCameraContext、カメラ コンテキストを作成する関数 CameraContext オブジェクト
注:
①CameraContext インスタンスは wx.createCameraContext で取得できます。②CameraContext は、ページ内の唯一のカメラ コンポーネントにバインドされ、対応するカメラ コンポーネントを操作します。
<camera></camera>カメラ タグ - 基本プロパティ
以上が<camera></camera>カメラタグの基本的な属性で、順次紹介していきます。
mode 属性
mode 属性値
device-position 属性
device-position 属性値
flash 属性
flash 属性値
frame-size 属性
flash 属性値
注:
①同じページに挿入できるカメラ コンポーネントは 1 つだけです
②onCameraFrame インターフェイスは、サイズに応じて異なるサイズの元のフレーム データを返します。 frame-size 、Camera コンポーネントによって表示される画像とは異なり、その実際のピクセル値はシステムによって決定されます
<camera></camera>[カメラ] タブ - イベント プロパティ
場合：
メディア コンポーネント - リアルタイムのオーディオとビデオ
<live-player></live-player>リアルタイムのオーディオとビデオの再生
注:
リアルタイムのオーディオとビデオの再生は、ミニプログラムの次のカテゴリの国内エンティティでのみ利用できます. まずカテゴリのレビューに合格する必要があります, その後、ミニプログラム管理のバックグラウンドでコンポーネントの権限を自分で開く必要があります. 「開発」-「インターフェース設定」。
<live-pusher></live-pusher>リアルタイムのオーディオおよびビデオ録画
注:
リアルタイムのオーディオとビデオの録画。scope.camera と scope.record にはユーザー認証が必要です。
当面の間、国内事業体のミニプログラムの以下のカテゴリにのみ公開されています.最初にカテゴリ審査に合格する必要があります.その後、ミニプログラム管理バックグラウンドでコンポーネント権限を自己アクティブ化できます,「開発" - "インターフェース設定"
要約する
メディア コンポーネント
<audio></audio>オーディオ
<video></video>コントロールビデオ コントロールピクチャ
<image></image>ラベル
<camera></camera>カメラ ラベル
<live-player></live-player>リアルタイム オーディオおよびビデオ再生 (認証が必要、理解のみ)
<live-pusher></live-pusher>リアルタイム オーディオおよびビデオ録画 (認証が必要、理解のみ)