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疑似クラス名を数字で始めないでください

初心者が div+css を開発する場合、.ggg、#ccc などの形式の CSS 疑似クラス名を付...

キャンバスでPS消しゴムスクラッチカードの効果を実現するためのJSの使用方法の詳細な説明

目次効果のデモンストレーション:メインJSコード実装 <div class="box...

Reactのヒントはフックの依存関係の問題を解消する方法を教えます

reactプロジェクトで非常に一般的なシナリオ: const [watchValue、setWatc...

Dockerのローカルイメージ作成方法の分析

コンテナと呼ばれるものは、実際には親イメージに基づいて読み取りおよび書き込み可能なファイル階層を作成...

ウェブサイトのフロントエンドパフォーマンスの最適化: JavaScript と CSS

Yahoo チームが書いた、ウェブサイトのパフォーマンス最適化に関する記事を読みました。この記事は...

CSS を使用して小さな画像をプルダウンし、大きな画像と情報を表示する方法

今日は、Taobao、JD.comなどのショッピングモールでよく使われている、小さな画像の上にマウス...

ApacheのDjangoオンライン展開方法

環境: 1. Windows Server 2016 Datacenter 64 ビット 2. SQ...

CSS はスクロールバーを非表示にしてコンテンツをスクロールする効果を実現します (3 つの方法)

フロントエンド開発では、スクロールバーを非表示にしながらスクロールをサポートしなければならないという...

MySQLを監視するためのbinlogログ解析ツールの詳しい説明:Canal

Canal は、Java を使用して開発された Alibaba のオープンソース プロジェクトです...

JavaScript を使用して userAgent を通じていくつかの一般的なブラウザを判別する方法

序文通常、h5 ページを作成するときは、WeChat、QQ、Weibo などのエコシステム内でトラフ...

Nginx をインストールして複数のドメイン名を設定する方法

Nginx のインストールCentOS 6.x yum にはデフォルトで nginx ソフトウェア ...

初心者のための HTML コーディングガイドライン 30 選

1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...

HTMLでは、全体的なスタイルとレイアウトを崩さずに、部分的に強制スクロールバーを使用できます。

まずはエフェクト画像を投稿します:全体的なスタイルとレイアウトが崩れないように、スクロール バーがロ...

選択/フォーカス時にすべてのオプションをリストする現在のより良い方法

開発中にこのような要件に遭遇したので、将来使用するために記録しました。需要背景キーボード ショートカ...

なぜCSSをヘッドタグに配置する必要があるのか

考えてみてください。なぜcss 、 javascriptのようにbodyタグの末尾ではなく、 hea...