HarmonyOS实战—影视类卡片应用(二)

简介: HarmonyOS实战—影视类卡片应用(二)

视频播放页面


主页我们已经完全实现了。下面,需要实现点击这些视频展示图片跳转的视频播放页面。我们先来看看其最终的效果图:


页面(pagevideo.hml)

这里,我们先剖析一下这个界面有哪些东西?


顶部的视频播放组件:<video>

Vip会员橙色按钮:<button>

图像金字塔以及视频的简介:标题<text>、评分<text>、vip<image>、播放量以及简介<text>。

点赞,喜欢,下载,搜藏:4个<image>。

专辑列表:<text>

其他推荐列表:<list>


既然,我们已经分析出来了界面的布局,那么直接上代码即可。示例如下:

<div style="flex-direction : column;">
    <video id='videoId' src='{{ mp4_url }}' muted='false' autoplay='false' poster='{{ url }}' controls="true"
           onprepared='preparedCallback' onstart='startCallback' onpause='pauseCallback' onfinish='finishCallback'
           onerror='errorCallback' onseeking='seekingCallback' onseeked='seekedCallback'
           ontimeupdate='timeupdateCallback' style="object-fit : fill; width : 100%; height : 250px;"
           onlongpress='change_fullscreenchange' onclick="change_start_pause"/>
    <div class="div_list">
        <button class="vip_button">VIP会员低至30元每季度,618狂欢进行中</button>
        <text class="text_title">{{ title }}</text>
        <div class="div_row">
            <text class="div_row_text">7.5分</text>
            <image class="div_row_image" src="../../../common/images/vip.png"/>
            <text class="div_row_text">2333.3万次播放 · 简介 ></text>
        </div>
        <div class="div_row">
            <image class="div_row2_image" src="../../../common/images/dianzan.png"/>
            <div class="div_row2">
                <image class="div_row2_image" src="../../../common/images/like.png"/>
                <image class="div_row2_image" src="../../../common/images/download.png"/>
                <image class="div_row2_image" src="../../../common/images/share.png"/>
            </div>
        </div>
        <text style="font-size : 15px; font-weight : bold;margin-top: 10px;">专辑列表</text>
        <div class="container">
            <list class="list" divider="true">
                <list-item for="{{responseData.vipList}}" class="list_item">
                    <image class="list_image" src="{{$item.img_url}}"/>
                    <text class="list_title">{{$item.title}}</text>
                </list-item>
            </list>
        </div>
    </div>
</div>


用户交互(pagevideo.js)

从上面的界面中,我们除了返现各种搭配的组件之外。还可以明显看到,专辑列表的视频推荐是从网络获取的,视频的播放交互,需要JS操作。


而且,最重要的是我们从前面主页传递过来的参数,如何获取呢?代码如下所示:

import fetch from '@system.fetch';
import router from '@system.router';
export default {
    data: {
        title: 'World',
        url: "",
        mp4_url: "",
        event: '',
        seekingtime: '',
        timeupdatetime: '',
        seekedtime: '',
        isStart: true,
        isfullscreenchange: false,
        duration: '',
        responseData:'正在加载中',
    },
    seekingCallback: function (e) {
        this.seekingtime = e.currenttime;
    },
    timeupdateCallback: function (e) {
        this.timeupdatetime = e.currenttime;
    },
    change_start_pause: function () {
        if (this.isStart) {
            this.$element('vedioId').pause();
            this.isStart = false;
        } else {
            this.$element('vedioId').start();
            this.isStart = true;
        }
    },
    change_fullscreenchange: function () { //全屏
        if (!this.isfullscreenchange) {
            this.$element('videoId').requestFullscreen({
                screenOrientation: 'default'
            });
            this.isfullscreenchange = true;
        } else {
            this.$element('vedioId').exitFullscreen();
            this.isfullscreenchange = false;
        }
    },
    fetch: function () {
        var that = this;
        fetch.fetch({
            url: 'https://liyuanjing-1300376177.cos.ap-shanghai.myqcloud.com/viptopmodel.json',
            success: function (response) {
                console.info("网络请求成功");
                that.responseData = JSON.parse(response.data);
                console.info(that.responseData.vipList[0].title);
            },
            fail: function () {
                console.info("网络请求错误");
            }
        });
    },
    onInit() {
        this.url = decodeURIComponent(this.data1);
        this.mp4_url = decodeURIComponent(this.data2);
        this.title= decodeURIComponent(this.data3);
        this.fetch();
    }
}


可以发现,鸿蒙开发获取参数非常简单,你怎么传递的参数,就是什么名字,这里就不在赘述了。


界面样式(pagevideo.css)

最后,就是我们的视频播放页面的界面样式。示例代码如下所示:

.div_list {
    flex-direction: column;
    margin: 10px;
}
.div_row {
    flex-direction: row;
    margin-top: 5px;
}
.div_row_text {
    font-size: 10px;
    font-family: sans-serif;
    color: darkgrey;
}
.div_row_image {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
}
.div_row2 {
    flex-direction: row;
    position: absolute;
    right: 0;
}
.div_row2_image {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    margin-right: 20px;
    margin-left: -2px;
    left: 0;
}
.text_title {
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;
    margin-top: 10px;
}
.vip_button {
    background-color: darkorange;
    font-size: 20px;
    font-family: sans-serif;
    color: aqua;
    border-radius: 0px;
    box-shadow: 2px 2px 5px 2px #FF7F00;
    padding: 10px;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 454px;
    height: 454px;
}
.list {
    width: 100%;
    margin-top: 10px;
    divider-color: #32CD99;
}
.list_item {
    width: 100%;
    flex-direction: row;
    margin-top: 5px;
    padding-bottom: 5px;
}
.list_title {
    text-align: center;
    height: 100px;
    font-size: 15px;
    font-weight: bold;
    color: coral;
    margin-left: 10px;
}
.list_image {
    width: 200px;
    height: 100px;
    border-radius: 5px;
}


其他设置

默认应用是不支持网络请求的,也就是说,纯粹使用上面的代码。肯定会报错,那么我们如何赋予应用网络权限呢?


只需要在config.json文件中,添加如下代码即可:


"module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    "metaData": {
      "customizeData": [
        {
          "name": "hwc-theme",
          "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar"
        }
      ]
    },


其中,reqPermissions是用于添加权限的,这里我们添加了ohos.permission.INTERNET网络权限。


还有默认应用创建都是有标题栏的,这里没有标题栏是因为博主设置了metaData样式,这里设置为无标题栏NoTitleBar。


本项目源代码文件下载:点击下载

相关文章
|
4天前
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
本篇将带你实现一个多滑块联动的控制器应用。用户可以通过拖动多个滑块,动态控制不同参数(如红绿蓝三色值),并实时显示最终结果。我们将以动态颜色调节为例,展示如何结合状态管理和交互逻辑,打造一个高级的滑块控制器应用。
138 78
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
|
6天前
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
108 67
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
|
11天前
|
存储 UED
「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
本篇将带你实现一个随机颜色变化器应用。用户点击“随机颜色”按钮后,界面背景会随机变化为淡色系颜色,同时显示当前的颜色代码,页面还会展示一只猫咪图片作为装饰,提升趣味性。
63 36
「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
|
8天前
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
本篇将带你实现一个升级版的数字猜谜游戏。相比基础版,新增了计分和历史记录功能,用户可以在每次猜测后查看自己的得分和猜测历史。此功能展示了状态管理的进阶用法以及如何保存和显示历史数据。
61 31
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
|
3天前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
42 19
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
|
3天前
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
本篇将带你实现一个数字键盘应用,支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。
39 17
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
|
11天前
|
UED 开发者
「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
本篇将带你实现一个简单的数字滚动抽奖器。用户点击按钮后,屏幕上的数字会以滚动动画的形式随机变动,最终显示一个抽奖数字。这个项目展示了如何结合定时器、状态管理和动画实现一个有趣的互动应用。
63 23
「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
|
7天前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。
90 10
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
|
12天前
「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历
本篇将带你实现一个简易日历应用,显示当前月份的日期,并支持选择特定日期的功能。用户可以通过点击日期高亮选中,还可以切换上下月份,体验动态界面的交互效果。
38 12
「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历
|
18天前
|
UED
「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用
本篇将带领你实现一个趣味十足的互动应用,用户点击按钮时猫会在一排灯之间移动,猫所在的位置灯会亮起(on),其余灯会熄灭(off)。应用会根据用户的操作动态更新灯光状态和文本提示当前亮灯的位置,是掌握状态管理和组件动态渲染的良好实践。
55 15
「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用