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 のルート パスワードを忘れた場合の変更方法

推薦する

Reactの仮想DOMとdiffアルゴリズムの詳細な説明

仮想DOMの役割まず、仮想 DOM の出現によってどのような問題が解決されるのかを知る必要があります...

js 学習ノート: class、super、extends キーワード

目次序文1. es6の前にオブジェクトを作成する2. es6 後のクラス宣言3. クラスの継承4. ...

MySQL インデックスの種類 (通常、ユニーク、フルテキスト) の説明

MySQL のインデックスの種類には、通常のインデックス、一意のインデックス、全文インデックスがあり...

最新の超詳細な VMware 仮想マシンのダウンロードとインストールのグラフィック チュートリアル

目次1. 仮想マシンをダウンロードする2. 仮想マシンのインストールVMware のダウンロードとイ...

Nginx リバース プロキシを使用してクロスドメイン問題を解決する方法の詳細な説明

質問前回のクロスドメイン リソース共有に関する記事では、ドメイン間で Cookie を送信する場合、...

Centos7 DockerでNginxファイルを変更するプロセスの詳細な説明

1. docker に nginx をインストールします。 docker に Nginx をインスト...

非常に詳細な MySQL8.0.22 のインストールと設定のチュートリアル

みなさんこんにちは。今日は、MySQL 8.0.22 のインストールと構成について学習します。注意深...

HTML の隠しフィールドの紹介と例

基本的な構文: <input type="hidden" name=&qu...

Docker execは複数のコマンドを実行します

docker exec コマンドは、実行中のコンテナ内でコマンドを実行できます。 docker ex...

Vueが初めて要素を取得できなかったときの解決記録

序文Vue で要素を初回取得できない問題の解決方法は、ポップアップ ウィンドウで要素を取得するために...

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

dockerでビルドしたnacos1.3.0の実装

1. nacosデータベースを再開します。データベース名nacos_configユーザー名とパスワー...

React Router V6 のアップデート

目次ReactRouterV6 の変更1. <Switch> が <Routes&...

いくつかの重要なMySQL変数

MySQL 変数は数多くありますが、その中には注目に値するものもあります。ここでは、参考までに、注目...

JavaScriptを使用して独自のAjax関数を定義する

ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため...