この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.21 解凍版のインストールと設定方法のグラフィックチュートリアル (win10)
>>: SSL で Nginx リバース プロキシを構成する簡単な手順
目次1. インストール2. インポート3. 検証ルールを定義します(エクスポート用に js ファイル...
序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...
WeChat ミニプログラム コンポーネント設計仕様コンポーネントベースの開発という考え方は、私の開...
今日ログインページを書いていたとき、個人情報と携帯電話番号を認証する必要がありましたが、ページにボタ...
htmlコードをコピーコードは次のとおりです。 <SPAN class=tag><...
最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...
序文みなさんこんにちは。私は梁旭です。職場では、システムの起動後にスクリプトやサービスを自動的に開始...
序文以前、Docker の 2375 Remote API を有効にしていました。会社のセキュリティ...
目次序文1. 準備2. 実際の戦闘2.1 ミニプログラムの権限を設定する2.2 カプセル化ツールの機...
順序付きリストXML/HTML コードコンテンツをクリップボードにコピー<オルタイプ= &qu...
プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...
私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...
この記事では、テーブルの編集操作を実現するためのjs+Htmlの具体的なコードを参考までに共有します...
私が長い間遭遇してきた問題を要約してみましょう。プロジェクトでは、フロントエンドをレンダリングするた...
Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...