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 ログイン警告問題の解決策

推薦する

高度な JavaScript フロントエンド開発でよく使用されるいくつかの API の例の詳細な説明

目次ミューテーションオブザーバーAPI特徴インターセクションオブザーバーAPI例えば画像の遅延読み込...

独自の YUM リポジトリを作成する手順

簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...

Linux での MySQL マルチインスタンスの展開とインストール ガイド

MySQLマルチインスタンスとは簡単に言うと、MySQL マルチインスタンスとは、サーバー上で複数の...

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...

Tomcat サーバー入門の超詳細なチュートリアル

目次1. Tomcat の概念–1、サーバー–2、ウェブサーバー–3、Tomcatサーバー次にTom...

Dockerのyumソースの設定とCentOS7へのインストールの詳細な説明

ここではCentOS7が使用されており、カーネルバージョンは [root@localhost ~]#...

MySQL共通ストレージエンジンの機能と使用方法の詳細な説明

この記事では、一般的な MySQL ストレージ エンジンの機能と使用方法を例を使って説明します。ご参...

フローティング要素が親要素の高さを崩す原因と解決策の詳細な説明

フローティング要素は、親要素の高さを縮小します。要素を float float:left/right...

Linux resolv.conf の簡単な分析

1. はじめにresolv.conf は、さまざまなオペレーティング システムのドメイン ネーム シ...

MySQL 5.7 mysql コマンドラインクライアントの使用コマンドの詳細

MySQL 5.7コマンドを使用するMySQLコマンドラインクライアント1. パスワードを入力してく...

HTTPS の有効化に関する経験の共有

国内のネットワーク環境が悪化し続ける中、さまざまな改ざんや乗っ取りが後を絶たず、サイト全体をHTTP...

HTML テーブル データを Json 形式に変換するサンプル コード

<table>テーブルデータをJSON形式に変換するJavaScript関数は次のとおり...

純粋な CSS3 で蝶が羽ばたく様子を再現する例

純粋なCSS3で蝶が羽ばたく様子を再現。まずはその効果をご覧ください どうですか？効果はかなりいいで...

Vue を使用してパブリック アカウントの Web ページを開発する方法

目次プロジェクトの背景始めるvue-cliでプロジェクトを作成するモバイル適応についてnormali...

MySQLデータ遅延ジャンプの問題の解決策

今日は、データベース遅延ジャンプに関する別の典型的な問題を分析しました。このプロセスでは、参考のため...