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 リバース プロキシを構成する簡単な手順

推薦する

CSSは左固定と右適応のレイアウト方法を実現します

1. フローティングレイアウト1. 最初に固定幅の div をフロートさせます。ドキュメントフローか...

JavaScript offsetParent のケーススタディ

1. offsetParentの定義: offsetParentは子要素に最も近い位置に配置された親...

CSSとHTMLを組み合わせる4つの方法

(1)各HTMLタグには属性スタイルがあり、CSSとHTMLを組み合わせている。 <div s...

UbuntuのVimにNERDTreeプラグインをインストールする詳細な手順

NERDTree は Vim 用のファイル システム ブラウザーです。このプラグインを使用すると、ユ...

MySQLデータベースがNULLを可能な限り避ける理由

MySQL の多くのテーブルには、NULL が列のデフォルト属性であるため、アプリケーションが NU...

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

Macはシェル(ターミナル)SSHを使用してリモートサーバーに接続します前提条件: 接続する必要があ...

React 構成 px 変換 rem メソッド

関連する依存関係をインストールするnpm i lib-flexible --save npm i p...

JS を使用して HTML で回転するクリスマスツリーを実装する

<!DOCTYPE ヘムル パブリック> <html> <ヘッド&g...

CSS3 変換によって子要素の固定位置を絶対位置に変更する方法

この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...

MAC で MySQL のデフォルトの文字セットを utf8 に変更する方法

1. デフォルトでインストールされているMySQLの文字セットを確認するmysql> '...

Zabbix 監視 Docker アプリケーション構成

コンテナの応用はますます一般的になっていますが、大量のコンテナをどのように管理すればよいのでしょうか...

フレックスボックスレイアウトの最終行の左揃えの実装アイデア

フレックスレイアウトを使用すると、9つの正方形のグリッドであれば、図に示すように均等に分割できます。...

派手なカルーセル効果を実現するJavaScript

この記事では、JavaScriptで派手なカルーセル効果を実装する2つの方法を紹介します。具体的な内...

JS を使用して Web ページのウォーターフォール レイアウトを実装する方法

目次序文:ウォーターフォールレイアウトとは何ですか?達成方法: 1. 画像を取得する2. 画像の帯域...

Ubuntu 20.04 ダブルピンイン入力方式のインストール手順

1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...