#2020征文-手机# 零基础鸿蒙开发4 - 如何播放一个全屏视频(JS版)-低调大师

#2020征文-手机# 零基础鸿蒙开发4 - 如何播放一个全屏视频(JS版)

2020-12-22 720

目录：
#2020征文-手机# 零基础鸿蒙开发1 - IDE安装
 #2020征文-手机# 零基础鸿蒙开发2-第一个世界版Hello World
#2020征文-手机# 零基础鸿蒙开发3 - 第一个页面互动（JS版）

简单的互动我们实现后，接下来来到整体了，先把视频播放实现了。

跟Java的实现方法相比，JS版本的简直简单到逆天。

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

一个容器元素(div)，一个文本元素(text)。一个页面只有一个根元素，可以包含若干子元素，子元素还可以有一个或若干子元素，形成一个树根型的结构。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

查看更多章节

作者:yagamis
想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com/#kyzg

微信关注我们

原文链接：https://my.oschina.net/u/4857646/blog/4822589

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

TypeScript 备忘录：如何在 React 中完美运用？

前言一直以来，ssh 身边都有很多小伙伴对 TS 如何在 React 中运用有很多困惑，他们开始慢慢讨厌 TS，觉得各种莫名其妙的问题降低了开发的效率。其实如果运用熟练的话，TS 只是在第一次开发的时候稍微多花一些时间去编写类型，后续维护、重构的时候就会发挥它神奇的作用了，还是非常推荐长期维护的项目使用它的。其实我一直知道英文版有个不错的备忘录，本来想直接推荐给小伙伴，奈何很多人对英文比较头痛，而它中文翻译的版本点进去竟然是这个景象：既然如此，就自己动手。结合英文原版里的一些示例进行一些扩展，总结成这篇备忘录。前置基础阅读本文的前提条件是：熟悉 React 的使用。熟悉 TypeScript 中的类型知识。本文会侧重使用 React Hook 作为示例，当然大部分类型知识都是通用的。也就是说，这篇文章侧重点在于「React 和 TypeScript 的结合」，而不是基础知识，基础知识阅读文档即可学习。也推荐看我初中级前端的高级进阶指南这篇文章中的 React 和 TypeScript 章节，这里不多赘述。工具 TypeScript Playground w...

2020-12-22

625

上一篇文章我写了koa-static的源码解析，其中用到了HTTP的缓存策略，给返回的静态文件设置了一些缓存的头，比如Cache-Control之类的。于是我就跟朋友讨论了一下HTTP的缓存策略：朋友说：“HTTP里面控制缓存的头(header)太多了，啥Cache-Control，ETag，Last-Modified，一大堆，乱七八糟的，而且之间逻辑关系不强，要掌握基本靠背！” 我有点惊讶：“为什么要去背这个呢？所有的技术都是为了解决问题而存在的，不了解问题而去单纯的学习技术，去，背，去，死记，确实很枯燥，而且效果不好。HTTP缓存策略只是为了解决客户端和服务端信息不对称的问题而存在的，客户端为了加快速度会缓存部分资源，但是下次请求时，客户端不知道这个资源有没有更新，服务端也不知道客户端缓存的是哪个版本，不知道该不该再返回资源，其实就是一个信息同步问题，HTTP缓存策略就是来解决这个问题的。如果我们跳出这种纯粹的技术思维，我们会发现生活中这种信息同步问题也很常见。而我们解决这些问题的思路很多时候都是司空见惯了，如果从这个角度来说，这个问题就很好理解！” 于是我给他讲了一个我小时候租...

2020-12-22

696

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。