WeChatアプレットはビデオプレーヤーのビデオコンポーネントを使用します

WeChatアプレットはビデオプレーヤーのビデオコンポーネントを使用します

この記事の例では、WeChatアプレットのビデオプレーヤーコンポーネントの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

app.json でページ ルーティングと権限を構成します。

1.app.json

{
  「ページ」:[
    「ページ/ビデオ/ビデオ」
]、
"許可": {
    "scope.writePhotosAlbum": {
      "desc": "アルバムを読む"
    }
  }
}

ビデオコンポーネントの使用

2.ビデオ.wxml

<view class="section tc">
  <ビデオ
    id="myVideo"
    src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
    danmu-list="{{danmuList}}"
    有効にする
    ダンム-btn
    コントロール
  </ビデオ>
  <view class="btn-area">
    <button bindtap="bindButtonTap">ビデオを取得</button>
    <input bindblur="bindInputBlur" />
    <button bindtap="bindSendDanmu">Danmu を送信</button>
  </ビュー>
</ビュー>

3. オーディオ

関数 getRandomColor() {
  定数rgb = []
  (i = 0; i < 3; ++iとします) {
    color = Math.floor(Math.random() * 256).toString(16) とします。
    色 = 色.長さ == 1 ? '0' + 色 : 色
    rgb.push(色)
  }
  '#' + rgb.join('') を返します
}

ページ({
  onReady(res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  入力値: ''、
  データ: {
    ソース: ''、
    danmuリスト: [
      {
        テキスト: '最初の箇条書きコメント'、
        色: '#ff0000',
        時間: 1
      },
      {
        テキスト: 「3秒目に現れた弾幕」
        色: '#ff00ff',
        時間: 3
      }]
  },
  バインド入力ブラー(e) {
    this.inputValue = e.detail.value
  },
  バインドボタンタップ() {
    const that = this
    wx.chooseVideo({
      ソースタイプ: ['アルバム', 'カメラ'],
      最大持続時間: 60,
      カメラ: ['前面', '背面'],
      成功(res) {
        that.setData({
          ソース: res.tempFilePath
        })
      }
    })
  },
  バインド送信ダンム() {
    this.videoContext.sendDanmu({
      テキスト: this.inputValue、
      色: getRandomColor()
    })
  }
})

効果:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットが弾丸画面を送信するビデオプレーヤーを実装
  • WeChatアプレット開発ビデオプレーヤービデオ弾幕弾幕カラーカスタマイズ例
  • WeChatアプレットのビデオは、カスタム再生ボタン、カバー画像、ビデオカバーテキストを実装しています。
  • WeChat アプレットはビデオ コンポーネントを使用してビデオ機能を再生する例 [ソース コードのダウンロード付き]
  • WeChatミニプログラムのビデオの詳細な説明と簡単な例
  • WeChatアプレットビデオコンポーネントの詳細な説明
  • WeChatミニプログラムビデオAPIの例の詳細な説明
  • WeChatアプレットビデオコンポーネントの詳細な説明とサンプルコード

<<:  さまざまなターミナルで Mac が SSH 経由でリモート サーバーに接続する方法の説明

>>:  Windows 10 での MySQL 5.7.19 インストール チュートリアル MySQL のルート パスワードを忘れた場合の変更方法

推薦する

CSS インライン スタイル、埋め込みスタイル、外部参照スタイルを使用する 3 つの方法

3 つの方法を使用する簡単な例は次のとおりです。インラインスタイル: <!doctypehtm...

Vueのデータ応答性原則の詳細な説明

この記事は主に、Vue のレスポンシブ ソース コードを理解していない、または触れたことがない人向け...

div間のギャップの解決策

HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...

MySQLの主キーとユニークキーの重複挿入の解決策の詳細な説明

目次解決: 1. 無視する2. 交換する3. 重複キーの更新についてデータを挿入するときに、重複した...

LinuxでのDockerのインストールチュートリアル

Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...

Mysql の varchar 型に関する注意点

varchar の保存ルール4.0 未満のバージョンでは、varchar(20) は 20 バイトを...

Tomcat クラスローダーの実装方法とサンプルコード

Tomcat は内部的に複数の ClassLoader を定義し、アプリケーションとコンテナーが異な...

JavaScript データ型変換の例 (他の型を文字列、数値型、ブール型に変換する)

序文データ型変換とは何ですか?フォームまたはプロンプトを使用して取得されるデフォルトのデータ型は文字...

HTMLフレームワーク_Powernode Javaアカデミー

1. フレームワークブラウザのドキュメント ウィンドウには 1 つの Web ページ ファイルしか表...

MySQL のロックとトランザクションの簡単な分析

MySQL 自体はファイルシステムに基づいて開発されましたが、ロックの存在が異なります。データベース...

MySQLは複数テーブル関連統計(サブクエリ統計)の例を実装します

この記事では、例を使用して、MySQL で複数テーブルの関連統計を実装する方法について説明します。ご...

Dockerを使用してJenkinsをインストールする方法

目次1. イメージをプルする2. ローカルデータボリュームを作成する3. コンテナを作成する4. J...

CSS における px、em、rem、%、vw、vh 単位の違いの詳細な説明

1.ピクセルpx はピクセルの略語で、画面解像度に対する相対的な長さの単位です。 2. えむ参照は親...

Vueプロジェクトでよく使われる実践的なスキルのまとめ

目次序文1. マルチレベルのデータとイベントの配信には$attrsと$listenersを使用する2...

CentOS8でyumソースを変更した後にウェアハウスキャッシュの同期に失敗する問題の詳細な説明

問題の原因: 最初は CentOS 8 のデフォルトの yum ソースを正常に使用できますが、次のコ...