更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz我们实现了简单的交互之后，来个整体，??先实现视频播放。与Java实现方式相比，JS版简直就是天作之合。进入index.hml，你会看到主页的结构，它实际上分为2个部分：容器元素（div）和文本元素（text）。一个页面只有一个根元素，根元素可以包含若干个子元素，子元素也可以有一个或若干个子元素，形成树根结构。类字段是两个元素的样式修改，比如改变大小、颜色、边框、内部子元素的排列等。首先我们看抖音首屏的UI结构：我们不考虑上下滑动多个视频列表，我们只考虑一个页面只有一个视频播放器的场景，那么这个根容器应该有以下特点：里面的元素，堆叠，既不横也不竖。播放按钮在视频播放器上方，右侧的视频标题和“社交栏”也在播放器上方。好玩的话可以叫Z轴排列，3D排列等等。那么，在鸿蒙提供的JS组件中，究竟有哪个容器可以胜任这个重任呢？一番查找后，发现有一个完全可以，于是赶紧取酒为这个英雄组件开路！把index.hml里的代码全部删掉，在Stack里打入，其实打st的时候有语法提示，直接选就可以了：然后给stack添加一个style，因为是根容器，所以会占用整个屏幕，代码是在style中添加宽高的描述（百分比）：这时候我们需要导入一个短视频，那么放在哪里呢？在JS目录上右键菜单，New-Directory，新建一个Res目录，用来存放项目需要的资源文件，比如视频，图片，音乐等，在其下新建一个子目录video，将将我准备的videomp4文件（可以找到一个或多个可以播放的短视频文件）放到video目录下。效果如图：将视频加入项目后，就可以玩新角色了。现在在Stack中，添加一个Video组件，名字很直观。
