1.1项目思路

添加一个video组件用于视频播放的操作，设置屏幕显示的宽高，设置全屏播放，通过点击事件设置视频的播放和暂停。

1.2建立项目

Compile SDK选择7版本，编程语言为JS。

图1-1项目建立

1.3连接虚拟机并运行项目  

图1-2 虚拟设备管理

图1-3 虚拟设备选择

虚拟设备选择华为p50 API为8，并运行，结果如下：

图1-4 虚拟机运行

 1.4 项目实现目录与代码

（i）项目目录

图1-5项目目录

（ii）项目代码

页面一：

index.css

.container{
    flex-direction: column;//将页面内容居中显示
    justify-content: center;
    align-items: center;
}
.text{
    text-color: black;//设置字体颜色、位置、大小
    text-align:right;
    font-size: 42px;
}
.button{
    text-align: right;//设置button按钮相关属性
    width: 240px;
    height: 75px;
    background-color: aqua;
    font-size: 30px;
    text-color: black;
    margin-top: 20px;
}

index.hml

<div class="container">
    <text class="text">欢迎您的到来！</text>
    <button class="text" type="capsule" value="播放视频" onclick="launch"></button>//点击按钮后触发launch事件
    </div>

index.js

import router from '@system.router';
export default{
    launch(){//编写launch事件，点击按钮后跳转至第二页面
        router.push({
            uri:'pages/shipin/shipin',
        })
    }
}

页面二：

shipin.css

.container {设置容器内容的主轴和对齐方式
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

}
.text{//设置文本的大小、颜色
    font-size: 20px;
    color: chocolate;
    font-weight: bold;
    margin: 20px;
}
.videoStyle {//设置视频的宽、高
    width: 100%;
    height: 50%;
    object-fit: fill;
}

shipin.hml

<div class="container">
    <text class="text">本地视频播放：</text>
    <video id='videoId' class="videoStyle" src='/common/VID_20221209_172338.mp4' muted='false'
           autoplay='true' controls="true" onprepared="onprepared" onstart="onstart"
           onpause="onpause" onfinish="onfinish" onerror="onerror" onseeking="onseeking"
           onseeked="onseeked" ontimeupdate="ontimeupdate" onclick="change_start_pause">
    </video>
</div>

Shipin.js

import prompt from '@system.prompt';
export default {
    data: {
        title: 'World',
        isStart: true,
    },
    onprepared(e){
        prompt.showToast({
            message:"准备就绪："+e.duration,
            duration:2000
        })
    },
    onstart(){
        prompt.showToast({
            message:"播放开始",
            duration:2000
        })
    },
    onpause(){
        prompt.showToast({
            message:"播放暂停",
            duration:2000
        })
    },
    onfinish(){
        prompt.showToast({
            message:"播放结束",
            duration:2000
        })
    },
    onerror(){
        prompt.showToast({
            message:"播放失败",
            duration:2000
        })
    },
    onseeking(e){
        prompt.showToast({
            message:"onseeking 拖动时间：" + e.currenttime,
            duration:2000
        })
    },
    onseeked(e){
        prompt.showToast({
            message:"onseeked 时间：" + e.currenttime,
            duration:2000
        })
    },
    ontimeupdate(e){
    },
    change_start_pause: function() {
        if(this.isStart) {
            this.$element('videoId').pause();
            this.isStart = false;
        } else {
            this.$element('videoId').start();
            this.isStart = true;
        }
    },
}

第2章  项目实现结果

2.1 项目实现结果图

图2.1 第一页面

图2.2 第二页面

天天排行榜