WeChatミニプログラムビデオ集中砲火位置ランダム

WeChatミニプログラムビデオ集中砲火位置ランダム

この記事では、WeChatミニプログラムのビデオ弾幕の位置をランダム化するための具体的なコードを紹介します。具体的な内容は次のとおりです。

最近開発ツールが更新された後、WeChatミニプログラム動画の集中砲火は自動的にランダムではなくなったため、巧妙な方法が使用されました(送信したい集中砲火と一緒に複数の空の集中砲火を送信し、乱数を使用して順序を制御します)。

wxml コード

<!--pages/study/video/videoplay/videoplay.wxml-->
<view class="page-body">
  <view class="page-section tc">
    <ビデオ 
      id="myVideo" 
      src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 
      binderror="videoErrorCallback" 
      danmu-list="{{danmuList}}" 
      有効にする 
      ダンム-btn 
      表示センター再生ボタン='{{false}}' 
      再生ボタンを表示 = "{{true}}" 
      コントロール
      ピクチャーインピクチャーモード="{{['push', 'pop']}}"
      bindenterpictureinpicture='bindVideoEnterPictureInPicture'
      bindleavepictureinpicture='bindVideoLeavePictureInPicture'
    </ビデオ>
    <view style="margin: 30rpx auto" class="weui-label">箇条書きコメントの内容</view>
    <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="ここに箇条書きの内容を入力してください" />
    <button style="margin: 30rpx auto" bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">Danmu を送信</button>
    <navigator style="margin: 30rpx auto" url="picture-in-picture" hover-class="other-navigator-hover">
      <button type="primary" class="page-body-button" bindtap="bindPlayVideo">小さいウィンドウモード</button>
    </ナビゲーター>
  </ビュー>
</ビュー>

jsコード

// ページ/study/video/videoplay/videoplay.js
var それ;
関数 getRandomColor() {
  定数rgb = []
  (i = 0; i < 3; ++iとします) {
    color = Math.floor(Math.random() * 256).toString(16) とします。
    色 = 色.長さ === 1 ? '0' + 色 : 色
    rgb.push(色)
  }
  '#' + rgb.join('') を返します
}
 
ページ({
  onShareAppMessage() {
    戻る {
      タイトル:「ビデオ」、
      パス: 'page/component/pages/video/video'
    }
  },
 
  準備完了() {
    それ = これ;
    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
        })
      }
    })
  },
 
  バインドビデオ入力ピクチャインピクチャ() {
    console.log('小さいウィンドウモードに入る')
  },
 
  バインドビデオを画像内に残す(){
    console.log('小さいウィンドウモードを終了')
  },
 
  バインド再生ビデオ() {
    this.videoContext.play()
  },
  バインド送信ダンム() {
    // ループと乱数を使用して位置を調整します var ranNum = Math.floor(Math.random()*10);
    var danmuList = [];
    (インデックス = 0、インデックス < 10、インデックス++) {
      danmuList.push('');
    }
    danmuList[ranNum] = this.inputValue;
    for (let index = 0; index < danmuList.length; index++) {
      this.videoContext.sendDanmu({
        テキスト: danmuList[インデックス],
        色: '#ff0000'
      });
    }
  },
 
  ビデオエラーコールバック(e) {
    console.log('ビデオエラーメッセージ:')
    コンソールログ(e.detail.errMsg)
  }
})

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

以下もご興味があるかもしれません:
  • WeChatアプレットが弾丸画面を送信するビデオプレーヤーを実装
  • WeChatアプレットに動画連打送信機能を実装
  • WeChatアプレット開発ビデオプレーヤービデオ弾幕弾幕カラーカスタマイズ例
  • WeChatミニプログラムvidaoはビデオ再生と連打の機能を実現します

<<:  MySQL 5.7.21 解凍版のインストールと設定方法のグラフィックチュートリアル (win10)

>>:  SSL で Nginx リバース プロキシを構成する簡単な手順

推薦する

Vue vee-validateプラグインの簡単な使い方

目次1. インストール2. インポート3. 検証ルールを定義します(エクスポート用に js ファイル...

モバイルウェブ画面適応(rem)

序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...

WeChatミニプログラム開発のためのコンポーネント設計仕様

WeChat ミニプログラム コンポーネント設計仕様コンポーネントベースの開発という考え方は、私の開...

WeChatミニプログラムはどのようにしてユーザー情報とユーザーの電話番号を同時に取得するのか

今日ログインページを書いていたとき、個人情報と携帯電話番号を認証する必要がありましたが、ページにボタ...

a タグをクリックして入力ファイルのアップロードダイアログボックスを表示する方法

htmlコードをコピーコードは次のとおりです。 <SPAN class=tag><...

CSS3はマスク連打機能を実現する

最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...

Linux システムを起動時に自動的にスクリプトを実行するように設定する方法の例

序文みなさんこんにちは。私は梁旭です。職場では、システムの起動後にスクリプトやサービスを自動的に開始...

安全な構成のためにDockerでTLSを有効にする手順

序文以前、Docker の 2375 Remote API を有効にしていました。会社のセキュリティ...

WeChatミニプログラムでのマップの正しい使用例

目次序文1. 準備2. 実際の戦闘2.1 ミニプログラムの権限を設定する2.2 カプセル化ツールの機...

HTML の順序付きリスト、順序なしリスト、定義リストに関する簡単な説明

順序付きリストXML/HTML コードコンテンツをクリップボードにコピー<オルタイプ= &qu...

MySQL で union all を使用してユニオンソートを取得する方法

プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...

WeChatミニプログラムは同時通訳を利用して音声認識を実装します

私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...

テーブル編集操作を実現する js+Html

この記事では、テーブルの編集操作を実現するためのjs+Htmlの具体的なコードを参考までに共有します...

Vueデータ割り当て問題の解決

私が長い間遭遇してきた問題を要約してみましょう。プロジェクトでは、フロントエンドをレンダリングするた...

Linux で同じバージョンの R を使用して Seurat2 と Seurat3 を同時にインストールするチュートリアル

Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...