2022年夏「モバイルソフトウェア開発」ラボレポート
氏名：xxx学籍番号2002000xxxx
| 名前と学籍番号は？ |
xxx2002000xxxx |
| この研究室はどのコースに属していますか? |
中国海洋大学22夏期「モバイルソフトウェア開発」 |
| 実験名は？ |
実験 3: ビデオ再生アプレット |
| ブログアドレス？ |
|
| Github の倉庫のアドレス? |
1. 実験の目的
1. 動画リストの切り替え方法をマスターする; 2. 動画の自動再生方法をマスターする; 3. 動画ランダムカラー弾幕の効果をマスターする。
第二に、実験手順
1、プロジェクト作成
2、ページ構成
コードの一部:
{
「ページ」: [
「ページ/インデックス/インデックス」
]、
"窓"： {
"navigationBarBackgroundColor": "#987938",
"navigationBarTitleText": "口頭学校史"
}、
"サイトマップの場所": "サイトマップ.json"
}
<!--エリア 1: ビデオ プレーヤー -->
<video id='myVideo' コントロール </video>
/*ビデオコンポーネントのスタイル*/
ビデオ{
width:100%;/*ビデオコンポーネントの幅は100%です*/
}
3、ビューデザイン
コードの一部:
/*エリア 2: 弾幕制御スタイル*/
/*2-1 弾幕エリアのスタイル*/
.danmuArea{
ディスプレイ:フレックス;
フレックス方向:行;
}
/*2-2 テキスト入力ボックスのスタイル*/
入力{
ボーダー:1rpx ソリッド#987938;
フレックスグロー:1;
高さ:100rpx;
}
/*2～3 ボタンのスタイル*/
ボタン{
色:白;
背景色:#987938;
}
/* エリア 3: ビデオ リスト スタイル */
/*3-1 動画リストエリアのスタイル*/
.videoList{
幅:100%;
最小高さ:400rpx;
}
/*3-2 単一行リスト形式*/
.videoBar{
幅:95%;
ディスプレイ:フレックス;
フレックス方向:行;
ボーダーボトム:1rpxソリッド#987938;
マージン:10rpx;
}
/*3-3 再生アイコンのスタイル*/
画像{
幅:70rpx;
高さ: 70rpx;
マージン:20rpx;
}
/*3-4 テキストタイトルのスタイル*/
文章{
フォントサイズ:45rpx;
色:#987938;
マージン:20rpx;
フレックスグロー:1;
}
4、ロジック実装
コードの一部:
ページ（{
/**
※ページの初期データ
*/
データ： {
ダンムTxt:'',
リスト: [{
ID: '299371'、
タイトル: 「楊国毅氏の学校歴史口述記録」,
videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
}、
{
ID: '299396'、
タイトル: 「唐成倫氏口述学校歴史記録」、
videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
}、
{
ID: '299378'、
タイトル: 「倪光明氏の学校歴史口述記録」、
videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
}、
{
ID: '299392'、
タイトル: 「呉宜興氏の学校歴史口述記録」、
videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
}
】
}、
/**
*
* 弾幕コンテンツを更新
*/
getDanmu:function(e){
this.setData({
danmuTxt:e.detail.value
})
}、
/**
*
* 弾幕を送る
*/
sendDanmu:function(e){
let text =this.data.danmuTxt;
this.videoCtx.sendDanmu({
テキスト:テキスト、
カラー:getRandomColor()
})
}、
/**
* ライフサイクル機能 - ページの読み込みを監視
*/
onLoad:関数(オプション){
this.videoCtx=wx.createVideoContext('myVideo')
}、
/**
* 動画を再生します
*/
playVideo:function(e){
// 前に再生していたビデオを停止します
this.videoCtx.stop()
//動画URLを更新
this.setData({
ソース: e.currentTarget.dataset.url
})
// 新しいビデオを再生する
this.videoCtx.play()
}、
})
//ランダムな色を生成する
関数 getRandomColor(){
rgb=[] にしましょう
for(let i=0;i<3;++i){
let color=Math.floor(Math.random()* 256).toString(16)
color =color.length==1?'0'+color:color
rgb.push(カラー)
}
return'#'+rgb.join('')
}
第三に、プログラムの実行結果
4番目、問題の概要と経験
今回のレッスンで私にとって一番のインスピレーションは、「コードを書くときは慎重に慎重に書かないと、バグが発生したときに何度もソースを辿らなければならず、非常に面倒だ」ということです。さらに、このレッスンの小さなビデオ再生プログラムも非常に役に立ち、ビデオ再生プログラムの構成とロジック実装を理解しました。