视频播放页面
主页我们已经完全实现了。下面，需要实现点击这些视频展示图片跳转的视频播放页面。我们先来看看其最终的效果图：
页面（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。
本项目源代码文件下载：点击下载
