この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux 継続的インテグレーションで Maven を自動的にインストールする方法
目次ミューテーションオブザーバーAPI特徴インターセクションオブザーバーAPI例えば画像の遅延読み込...
簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...
MySQLマルチインスタンスとは簡単に言うと、MySQL マルチインスタンスとは、サーバー上で複数の...
みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...
目次1. Tomcat の概念–1、サーバー–2、ウェブサーバー–3、Tomcatサーバー次にTom...
ここではCentOS7が使用されており、カーネルバージョンは [root@localhost ~]#...
この記事では、一般的な MySQL ストレージ エンジンの機能と使用方法を例を使って説明します。ご参...
フローティング要素は、親要素の高さを縮小します。要素を float float:left/right...
1. はじめにresolv.conf は、さまざまなオペレーティング システムのドメイン ネーム シ...
MySQL 5.7コマンドを使用するMySQLコマンドラインクライアント1. パスワードを入力してく...
国内のネットワーク環境が悪化し続ける中、さまざまな改ざんや乗っ取りが後を絶たず、サイト全体をHTTP...
<table>テーブルデータをJSON形式に変換するJavaScript関数は次のとおり...
純粋なCSS3で蝶が羽ばたく様子を再現。まずはその効果をご覧ください どうですか?効果はかなりいいで...
目次プロジェクトの背景始めるvue-cliでプロジェクトを作成するモバイル適応についてnormali...
今日は、データベース遅延ジャンプに関する別の典型的な問題を分析しました。このプロセスでは、参考のため...