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。


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

相关文章
|
2月前
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
本篇将带你实现一个虚拟音乐控制台。用户可以通过界面控制音乐的播放、暂停、切换歌曲,并查看当前播放的歌曲信息。页面还支持调整音量和动态显示播放进度,是音乐播放器界面开发的基础功能示例。
214 80
|
1月前
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
本篇教程将介绍如何创建一个模拟记账应用,通过账单输入、动态列表展示和实时统计功能,学习接口定义和组件间的数据交互。
168 68
|
2月前
|
流计算 UED
「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现
本篇教程将带你实现一个简易购物车功能。通过使用接口定义商品结构,我们将创建一个动态购物车,支持商品的添加、移除以及实时总价计算。
139 69
|
2月前
|
前端开发
「Mac畅玩鸿蒙与硬件49」UI互动应用篇26 - 数字填色游戏
本篇教程将带你实现一个数字填色小游戏,通过简单的交互逻辑,学习如何使用鸿蒙开发组件创建趣味性强的应用。
73 20
|
1月前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
72 13
|
1月前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
68 10
|
2月前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件50」UI互动应用篇27 - 水果掉落小游戏
本篇教程将带你实现一个水果掉落小游戏,掌握基本的动态交互逻辑和鸿蒙组件的使用,进一步了解事件处理与状态管理。
61 14
|
2月前
|
存储 JavaScript 开发工具
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
本次的.HarmonyOS Next ,ArkTS语言,HarmonyOS的元服务和DevEco Studio 开发工具,为开发者提供了构建现代化、轻量化、高性能应用的便捷方式。这些技术和工具将帮助开发者更好地适应未来的智能设备和服务提供方式。
76 8
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
|
2月前
|
2月前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
196 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】

热门文章

最新文章