WeChatアプレットが弾丸画面を送信するビデオプレーヤーを実装

WeChatアプレットが弾丸画面を送信するビデオプレーヤーを実装

この記事では、WeChatアプレットでビデオプレーヤーの集中砲火を実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

1. ビデオプレーヤー

  • ビデオ詳細 ビデオプレーヤー
  • 色を選択して集中砲火を送る

1. ページ作成

2. 弾幕画面の色を選択する

3. ビデオプラグインの使用

4. 関連コード

アプリ.json

//アプリ.json
{
  「ページ」:[
    「ページ/ビデオ詳細/ビデオ詳細」、
    「ページ/選択色/選択色」、
    「ページ/インデックス/インデックス」、
    「ページ/ログ/ログ」
  ]、
  "ウィンドウ"：{
    "backgroundTextStyle":"light",
    "ナビゲーションバーの背景色": "#fff",
    "navigationBarTitleText": "ビデオプレーヤー",
    "ナビゲーションバーのテキストスタイル":"黒"
  },
  "スタイル": "v2",
  "サイトマップの場所": "サイトマップ.json"
}

アプリ.wxss

/**アプリ.wxss**/
。容器 {
  高さ: 100%;
  ディスプレイ: フレックス;
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
  パディング: 200rpx 0;
  ボックスのサイズ: 境界線ボックス;
}

2. ビデオ詳細ビデオプレーヤー関連ページコード

ビデオ詳細.wxml

<!--pages/ビデオの詳細/ビデオの詳細.wxml-->
<view class="mainContent">
    <view class="mainList">
        <view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id && current_id == videoDetail.id}}">
            <view class="video">
                <video class="videoContent" id="videoId" show-center-play-btn="true" autoplay="true"
                    danmu-list="{{danmuList}}" danmu-btn 有効-danmu
                 src="{{videoDetail.videoUrl}}" object-fit="fill" bindfullscreenchange="fullscreenchange"></video>
            </ビュー>
        </ビュー>
        <view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id =='' || current_id != videoDetail.id}}">
            <view class="video">
                <image class="playImg" src="/images/play.png" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>
                <image class="videoContent" src="{{videoDetail.poster}}" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>
            </ビュー>
        </ビュー>
    </ビュー>
    <!--箇条書き画面-->
    <view class="danmu">
        <view class="danmu-input">
            <input class="weui-input" type="text" placeholder="箇条書き画面を入力してください" bindblur="bindInputblur"/>
        </ビュー>
        <view class="danmu-btn">
            <button type="primary" bindtap = "bindSendDanmu">Danmu を送信</button>
        </ビュー>
        <view class="danmu-color">
            <view class="danmu-color-switch">
                <view class="weui-cell-bd">ランダムカラー</view>
                <view class="weui-cell-ft">
                    <switch チェック済み="true" タイプ="switch" bindchange="switchChange"></switch>
                </ビュー>
            </ビュー>
            <view class="danmu-color-select" bindtap = "selectColor">
                <view class="weui-cell-bd">色を選択</view>
                <view class="weui-cell-ft">
                    <view class="selectColor" style="背景色: {{numberColor}};"></view>
                </ビュー>
            </ビュー>
        </ビュー>
    </ビュー>
</ビュー>

ビデオの詳細.wxss

.mainContent{
  背景: #ffffff;
  オーバーフロー:自動;
}
.mainList{
  幅:100%;
  背景: #ffffff;
  高さ: 396rpx;
}
。ビデオ{
  幅:94%;
  高さ: 324rpx;
  左マージン: 20rpx;
  位置: 相対的;
}
.ビデオコンテンツ{
  幅:100%;
  高さ: 324rpx;
}
/*小さいアイコンを再生*/
.playImg{
  位置: 絶対;
  トップ: 46%
  残り:46%;
  幅:64rpx;
  高さ: 64rpx;
}
/*弾丸スクリーン*/
.ダンム{
  幅:100%;
}
.danmu-input{
  幅:100%;
  高さ: 60rpx;
}
.weui-input{ 
  ディスプレイ: フレックス;
  幅:94%;
  高さ: 60rpx;
  アイテムの位置を中央揃えにします。
  左マージン: 20rpx;
  境界線の半径: 8rpx;
  境界線:2rpx実線 #cccccc;
  パディング左:10rpx;
  フォントサイズ: 28rpx;
}
.danmu-btn{
  幅:100%;
  上マージン: 20rpx;
}
.danmu-color{
  幅:100%;
  上マージン: 20rpx;
  上境界線:2rpx 実線 #cccccc;
}
.danmu-color-switch、.danmu-color-select{
  ディスプレイ: フレックス;
  flex-direction: 行;
  justify-content: space-between;/*両端を揃える*/
  アイテムの位置を中央揃えにします。
  マージン: 20rpx 20rpx 0 20rpx;
}
.weui-cell-bd{
  フォントサイズ: 28rpx;
}
.weui-cell-ft{
  フォントサイズ: 28rpx;
}
.selectColor{
  幅:80rpx;
  高さ: 80rpx;
  行の高さ: 100rpx;
}

ビデオの詳細.js

// ページ/ビデオの詳細/ビデオの詳細.js
ページ（{

  /**
   * ページの初期データ */
  データ： {
    current_id:''、//現在再生中のビデオID
    ビデオの詳細:{
      id:"1",
      "ビデオ URL":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4",
      「ポスター」:"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"
    },
    //ダンムリスト:[
      {
        テキスト: 「最初の1秒に表示される赤い弾丸の画面」
        色: '#ff0000',
        時間: 1
      },
      {
        テキスト: 「2秒目に表示される緑色の弾丸画面」
        色: '#00ff00',
        時間: 2
      },
      
    ]、
    isRandomColor: true, //デフォルトのランダムな数値Color: "#ff0000", //デフォルトの赤 inputValue: "", //テキストボックスの入力内容},

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {
    
  },  
  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数(){
    wx.getStorageSync('color') の場合 {
      this.setData({
        数値カラー: wx.getStorageSync('color')
      })
    }
  },
  /**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数 () {
    this.videoContext = wx.createVideoContext("ビデオID")
  },
  //ビデオリストクリックイベント videoPlay:function(e){
    コンソール.log(e)
    var id = e.currentTarget.dataset.index
    var currentId=e.currentTarget.id
    this.setData({
      現在のID: 現在のID
    })
    var videoContext = wx.createVideoContext(id)
    ビデオコンテキスト.再生()
  },
  //テキストボックスがフォーカスを失うイベントbindInputblur: function(e){
    // コンソールログ(e.detail.value)
    this.data.inputValue = e.detail.value
  },
  //弾幕画面の内容を送信するbindSendDanmu: function(e){
    //弾幕の色を設定する var color=""
    if(this.data.isRandomColor){//ランダムカラー color = this.getRandomColor()
    }それ以外{
      色 = this.data.numberColor
    }
    //Danmuを送信this.videoContext.sendDanmu({
      テキスト: this.data.inputValue、
      色:色
    })
  },
  //ランダムな色を設定する getRandomColor(){
    rgb = [] とします
    (i=0;i<3;++iとします){
      color = Math.floor(Math.random() * 256).toString(16) とします。
      色 = 色.長さ == 1 ? '0' + 色 : 色
      rgb.push(色)
    }
    '#' + rgb.join('') を返します
  },
  //スイッチ スイッチイベント switchChange: function(e){
    コンソール.log(e)
    this.data.isRandomColor = e.detail.value

  },
  //色を選択 selectColor:function(){
    wx.navigateTo({
      url: '/pages/select-color/select-color'
    })
  }
})

3. select-colorは関連するページコードを一斉送信します

選択色.wxml

<!--pages/select-color/select-color.wxml-->
<view class="page">
    <ビュークラス="page_bd">
        <view class="color-items">
            <block wx:for="{{colorItems}}">
                <view class="item" data-number="{{item.number}}" bindtap = "selectColor">
                    <view class="item-icon" style="background: {{item.number}};"></view>
                </ビュー>
            </ブロック>
        </ビュー>
    </ビュー>
</ビュー>

選択色.wxss

/* ページ/選択カラー/選択カラー.wxss */
.color-items{
  上境界線: 1rpx 実線 #d9d9d9;
  左境界線: 1rpx 実線 #d9d9d9;
}
。アイテム{
  位置: 相対的;
  フロート: 左;
  パディング: 20rpx; 
  幅: 20%;
  ボックスのサイズ: 境界線ボックス;
  右境界線: 1rpx 実線 #d9d9d9;
  下部境界線: 1rpx 実線 #d9d9d9;
}
.item-icon{
  表示: ブロック;
  幅:100rpx;
  高さ: 100rpx;
  マージン: 0 自動;
  ボックスの影: 3px 3px 5px #bbbbbb;
}

選択カラー.js

// ページ/select-color/select-color.js
ページ（{

  /**
   * ページの初期データ */
  データ： {
    カラーアイテム:[
      { キー: 1、色: '白'、数値: '#FFFFFF' },

      { キー: 2、色: '赤'、数値: '#FF0000' },

      { キー: 3、色: '緑'、数値: '#00FF00' },

      { キー: 4、色: '青'、数値: '#0000FF' },

      { キー: 5、色: '牡丹赤'、数値: '#FF00FF' },

      { キー: 6、色: 'シアン'、数値: '#00FFFF' },

      { キー: 7、色: '黄色'、数値: '#FFFF00' },

      { キー: 8、色: '黒'、数字: '#000000' },

      { キー: 9、色: 'シーブルー'、番号: '#70DB93' },

      { キー: 10、色: 'チョコレート'、番号: '#5C3317' },

      { キー: 11、色: '青紫'、数値: '#9F5F9F' },

      { キー: 12、色: '真鍮'、番号: '#B5A642' },

      { キー: 13、色: '明るいゴールド'、番号: '#D9D919' },

      { キー: 14、色: '茶色'、番号: '#A67D3D' },

      { キー: 15、色: 'ブロンズ'、番号: '#8C7853' },

      { キー: 16、色: 'ブロンズ No. 2'、番号: '#A67D3D' },

      { キー: 17、色: 'NCO ブルー'、番号: '#5F9F9F' },

      { キー: 18、色: 'コールドコッパー'、番号: '#D98719' },

      { キー: 19、色: '銅'、番号: '#B87333' },

      { キー: 20、色: 'コーラルレッド'、数値: '#FF7F00' },

      { キー: 21、色: '紫青'、番号: '#42426F' },

      { キー: 22、色: 'ダークブラウン'、番号: '#5C4033' },

      { キー: 23、色: 'ダークグリーン'、番号: '#2F4F2F' },

      { キー: 24、色: 'ダークカッパーグリーン'、番号: '#4A766E' },

      { キー: 25、色: 'ダークオリーブグリーン'、番号: '#4F4F2F' },

      { キー: 26、色: 'ダークオーキッド'、番号: '#9932CD' },

      { キー: 27、色: '濃い紫'、番号: '#871F78' },

      { キー: 28、色: 'ダークスレートブルー'、番号: '#6B238E' },

      { キー: 29、色: 'ダークリードグレー'、番号: '#2F4F4F' },

      { キー: 30、色: 'ダークブラウン'、番号: '#97694F' },

      { キー: 32、色: 'ダークターコイズ'、番号: '#7093DB' },

      { キー: 33、色: 'ダークウッド'、番号: '#855E42' },

      { キー: 34、色: 'ライトグレー'、番号: '#545454' },

      { キー: 35、色: 'ダストグレーローズレッド'、番号: '#856363' }、

      { キー: 36、色: '長石'、番号: '#D19275' },

      { キー: 37、色: '耐火レンガ色'、番号: '#8E2323' },

      { キー: 38、色: 'フォレストグリーン'、番号: '#238E23' },

      { キー: 39、色: 'ゴールド'、番号: '#CD7F32' },

      { キー: 40、色: '明るい黄色'、番号: '#DBDB70' },

      { キー: 41、色: 'グレー'、番号: '#C0C0C0' },

      { キー: 42、色: '銅緑'、番号: '#527F76' },

      { キー: 43、色: 'シアンイエロー'、番号: '#93DB70' },

      { キー: 44、色: 'ハンターグリーン'、番号: '#215E21' },

      { キー: 45、色: 'インディアンレッド'、番号: '#4E2F2F' },

      { キー: 46、色: 'カーキ'、番号: '#9F9F5F' },

      { キー: 47、色: 'ライトブルー'、番号: '#C0D9D9' },

      { キー: 48、色: 'ライトグレー'、番号: '#A8A8A8' },

      { キー: 49、色: 'ライトスチールブルー'、番号: '#8F8FBD' },

      { キー: 59、色: 'ライトウッド'、番号: '#E9C2A6' },

      { キー: 60、色: 'ライムグリーン'、番号: '#32CD32' },

      { キー: 61、色: 'オレンジ'、番号: '#E47833' },

      { キー: 62、色: 'マルーン'、番号: '#8E236B' },

      { キー: 63、色: 'ミッドシーブルー'、番号: '#32CD99' },

      { キー: 64、色: 'ミディアムブルー'、番号: '#3232CD' },

      { キー: 65、色: 'ミディアムフォレストグリーン'、番号: '#6B8E23' },

      { キー: 66、色: '中程度の明るい黄色'、番号: '#EAEAAE' },

      { キー: 67、色: 'ミディアムオーキッド'、番号: '#9370DB' },

      { キー: 68、色: 'ミディアムシーグリーン'、番号: '#426F42' }、

      { キー: 69、色: 'ミディアム スレート ブルー'、番号: '#7F00FF' },

      { キー: 70、色: 'ミディアムスプリンググリーン'、番号: '#7FFF00' },

      { キー: 71、色: 'ミディアムターコイズ'、番号: '#70DBDB' },

      { キー: 72、色: 'ミディアムパープル'、番号: '#DB7093' },

      { キー: 73、色: 'ミディアムウッドカラー'、番号: '#A68064' }、

      { キー: 74、色: 'ダークネイビー'、番号: '#2F2F4F' },

      { キー: 75、色: 'ネイビーブルー'、番号: '#23238E' },

      { キー: 76、色: 'ネオンバスケット'、番号: '#4D4DFF' },

      { キー: 77、色: 'ネオンピンク'、番号: '#FF6EC7' },

      { キー: 78、色: 'ニューダークブルー'、番号: '#00009C' },

      { キー: 79、色: 'ニュータン'、番号: '#EBC79E' },

      { キー: 80、色: 'ダークゴールデンイエロー'、番号: '#CFB53B' },

      { キー: 81、色: 'オレンジ'、番号: '#FF7F00' },
    ]

  },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {

  },

  /**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数 () {

  },
  //クリックして色を選択する selectColor(e){
    コンソール.log(e)
    数値 = e.currentTarget.dataset.number とします。
    //ローカルに保存されます wx.setStorageSync('color', number)
    //前のページに戻る wx.navigateBack({
      delta: 1, // ロールバック前のデルタ（デフォルトは1）ページ成功: function(res){
        // 成功
      },
      失敗: 関数() {
        // 失敗
      },
      完了: 関数() {
        // 完了
      }
    })
  }

})

4. ページ実装効果

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

以下もご興味があるかもしれません:
  • WeChatアプレット開発ビデオプレーヤービデオ弾幕弾幕カラーカスタマイズ例
  • WeChatアプレットのビデオは、カスタム再生ボタン、カバー画像、ビデオカバーテキストを実装しています。
  • WeChat アプレットはビデオ コンポーネントを使用してビデオ機能を再生する例 [ソース コードのダウンロード付き]
  • WeChatミニプログラムのビデオの詳細な説明と簡単な例
  • WeChatアプレットビデオコンポーネントの詳細な説明
  • WeChatミニプログラムビデオAPIの例の詳細な説明
  • WeChatアプレットビデオコンポーネントの詳細な説明とサンプルコード
  • WeChatアプレットはビデオプレーヤーのビデオコンポーネントを使用します

<<:  Linux 継続的インテグレーションで Maven を自動的にインストールする方法

>>:  MySQL ログイン警告問題の解決策

推薦する

シンプルな HTML ビデオ プレーヤーを実装する方法

この記事では、シンプルな HTML ビデオ プレーヤーを実装する方法を紹介し、皆さんと共有します。詳...

JS 正規マッチングの落とし穴の記録

最近、JS の正規表現マッチングの落とし穴を発見したのですが、その時はあまりにも奇妙だったので、何か...

HTML のボタン タグをクリックしてページにジャンプする 3 つの方法

方法1: onclickイベントを使用する <input type="button&...

Ubuntu 18.04 向け VMware Tools のインストールと構成のチュートリアル

この記事では、Ubuntu 18.04でのVMware Toolsのインストールと設定について記録し...

ミニプログラムでマインドマップを描く方法

目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...

crontab の実行結果を電子メールでユーザーに通知する方法

症状Centos7 ホストに crontab タスクを設定しましたが、時間が来るとメールを実行して「...

JavaScript 事前分析、オブジェクトの詳細

目次1. 事前分析1. 変数の事前解析と関数の事前解析1. 変数の事前解析2. 機能事前分析2. 事...

Docker ベースの Jenkins のデプロイに関する詳細なチュートリアル

このドキュメントを作成した当時は2019年12月頃で、er2.200が最新バージョンでした。 1.画...

linuxdeployqt を使用して Ubuntu で Qt プログラムをパッケージ化する問題を解決する

いくつかの Qt インターフェース プログラムを作成しましたが、Qt 環境がインストールされていない...

sqlalchemy に基づいて MySQL で追加、削除、変更、クエリ操作を実装する

需要シナリオ:上司は、クロ​​ーラーを使用してMySQLデータベースにデータを書き込んだり更新したり...

dockerでopenGaussデータベースを構成する方法の詳細な説明

Windowsユーザー向けDocker で openGauss を使用するopenGaussイメージ...

MySQLデータベースイベントスケジュール実行タスクの詳細な説明

1. 背景プロジェクトの業務が進むにつれて、データベース テーブルの数がどんどん大きくなり、ハードデ...

Linux での i3 ウィンドウ マネージャーの設定と使用に関するチュートリアル

この記事では、Fedora 28 に i3 をインストールして簡単に設定する方法を説明します。 1....

MySQL ストアド プロシージャのクエリ コマンドの概要

以下のように表示されます。 mysql.proc から名前を選択します (db='データベー...

MySQL 最適化ソリューション リファレンス

最適化によって発生する可能性のある問題最適化は必ずしも単純な環境で実行されるわけではなく、実稼働環境...