鸿蒙App开发：如何播放一个全屏视频（JS版）

鸿蒙技术社区 2020-12-22

585

简单的互动我们实现后，接下来来到整体了，先把视频播放实现了。跟 Java 的实现方法相比，JS 版本的简直简单到逆天。

转到 index.hml，你会看到首页的结构，其实分为 2 个部分：

一个页面只有一个根元素，可以包含若干子元素，子元素还可以有一个或若干子元素，形成一个树根型的结构。

class 字段是两个元素的样式修饰，比如改变尺寸、颜色、边框、内部子元素排列方式等等。

首先，我们来看下抖音首屏的 UI 结构：

不考虑上下刷多个视频列表，我们只考虑一个页面只有一个视频播放器的场景，那么这个根容器，应该具备以下特性：

其中的元素，层叠排列的，仅不是水平也不是竖直排列。播放按钮在视频播放器之上，视频标题、右侧”社交栏“其实也在播放器之上。

俏皮一点，可以称之为按 Z 轴排列，3D 排列等等。

那么，鸿蒙提供的 JS 组件中，有哪个容器可以堪此重任呢？一番查找后，发现有一个可以完美胜任，快取酒来给这位英雄组件开路！

删除 index.hml 中所有代码，打上 stack，其实打 st 就有语法提示，直接选就行：

然后给 stack 加上样式，既然是根容器，那就占满整个屏幕，代码就是在 style 加入宽度和高度的描述（百分比）：

<stack style="width: 100%; height: 100%;">

</stack>

这时候我们需要导入一个短视频，那么放在什么位置呢？

在 JS 目录上右击菜单，New - Directory，新建一个 Res 目录用以存放工程所需资源文件，比如视频、图片、音乐等等。

在其下再新建一个子目录 video，把我准备好的视频 mp4 文件（你自己可以找一个或多个任何能播放的短视频文件）拖入 video 目录中，效果如图：

工程中加入视频后，就可以用一个新角色来播放了。

现在 Stack 之中，加入一个 Video 组件，这名字非常直观哈。

<stack style="width: 100%; height: 100%;">
    <video>

    </video>
</stack>

那么你自然可以想到，video 组件本身的尺寸、视频填充方式（拉伸、平铺、居中）、是否一开始就自动播放、是否显示播放横条（暂停、进度条、全屏），所以有以下代码：

<video style="height: 100%;width: 100%; object-fit: cover;" autoplay="true" controls="false">

</video>

这其中，style="height: 100%;width: 100%; object-fit: cover;"，样式 style 中有 3 个属性，object-fit 是指视频的填充方式，cover 是指拉伸视频适应容器大小。

autoplay="true" 指一开始就自动播放，controls="false"不显示自带的播放控制条。

没想到一个简单的视频展示，居然有这么多花样，这时候我好想打开抖音研究几分钟...

10 分钟过去了... 短视频为什么能让人这么上瘾，可能你看这个教程后做一个类似的 App 最大的价值了，真的让人上瘾啊！

不要忘了，视频源，视频播放啥很关键。加上 Video 组件的 src 属性，完整 Video 代码如下：

<video style="height: 100%;width: 100%; object-fit: cover;" autoplay="true" controls="false" src="/res/video/高崖跳水.mp4">

</video>

一个视频播放器所需的属性都写完了，so easy，现在看看能不能播放吧！

开一个 Previewer 试试：

马萨卡？阿西吧，居然不能播放？预览器又一次拉胯，开模拟器吧：

可想而知，远程模拟器不给力，依然放不出来。不可能，我二弟天下无敌，上真机！我并不想炫耀的，逼我出招。

接上我刷好的的 P40（其实是华为给的测试机）。

模拟器列表中的 127.0.0.1:8888 的是远程模拟器，选择第一个真机运行：

效果非常完美，当然你看到这里可能没办法像我这样能真机运行。这个话题等大家真机都刷上咱们有机会再聊。接着更新，各位继续关注哈！

👇扫码关注鸿蒙技术社区👇

专注开源技术，共建鸿蒙生态

点“阅读原文”了解更多

文章转载自鸿蒙技术社区，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。