HarmonyOS提供了常用的JS接口和组件，开发者可以根据实际场景和开发需求，选用不同的组件和接口。本篇Codelab我们将一起开启JS组件媒体组件的学习之路。本教程是媒体组件之video、dialog组件的使用。
在本教程中，我们将会通过一个简单的样例，使用video组件实现一个播放器，包括播放、暂停、全屏、退出全屏、进度条拖动以及对应的事件。效果如下图所示，开发者还可以根据自己的需求添加不同的效果。

JS FA工程目录

新建工程的JS目录如下图所示。

在工程目录中：i18n下存放多语言的json文件；common.images下存放工程中使用的图片资源文件；pages文件夹下存放多个页面，每个页面由hml、css和js文件组成。

工程创建完成后，可参考下面章节进行代码编写，运行本样例工程可使用Phone 模拟器 。

在这个任务中，我们需要完成程序页面的新建和设计，并将程序使用到的video组件添加到布局文件index.hml中，在完成任务一新建项目后，我们看到系统自动创建了pages.index目录，在这个目录下，我们找到index.hml文件，开始进行任务二。
打开index.hml文件，里面有默认代码如下：

<div class="container"> 
    <text class="title"> 
        {{ $t('strings.hello') }} {{ title }} 
    </text> 
        
代码使用div组件和text组件来共同呈现文本显示的效果，其中div属于基础容器，用作页面结构的根节点或将内容进行分组；text是文本组件，用于呈现一段信息。有关这两个组件更多的知识，我们会在其他Codelab中为大家代码讲解。
        
video组件
        
开发者可以删除index.hml中的默认代码跟着接下来的步骤一起开发，添加video组件，效果如下：

        
<div class="video-block"> 
        <video id="video"        
		   class="video"        
		   src="{{url}}"       
		   autoplay="{{ autoplay }}"         
		   poster="{{posterUrl}}"         
		   controls="{{ controlShow }}"        
		   loop="{{ loop }}"        
		   starttime="{{startTime}}}"        
		   speed="{{speed}}"         
		   onprepared="prepared"         
		   onstart="start"         
		   onpause="pause"         
		   onfinish="finish"         
		   onseeked="seeked"         
		   ontimeupdate="timeupdate"        
		   onfullscreenchange="fullscreenchange"       
		   onlongpress="longPressFullscreenchange"       
		   on:click="hideControls" > 
        </video> 
        
dialog组件
        
添加dialog组件，效果如下：

        
<dialog id="confirmDialog" class="dialog-main"> 
        <div class="dialog-div">         
<div class="inner-txt">        
        <text class="txt">视频播放完成，是否重新播放？</text>         
<div class="inner-btn">         
        <button type="capsule" value="取消" onclick="cancel" class="btn-txt"></button>         
        <button type="capsule" value="确定" onclick="confirm" class="btn-txt"></button>         
</dialog>
        
这部分定义了video组件的样式，以及dialog组件的样式。删掉默认代码后，在index.css中添加如下代码：
        
.container { 
    flex-direction: column; /* 垂直排列 */ 
    background-color: lightgray; 
.video-block { 
    width: 100%; 
    aspect-ratio: 1.78; /* 宽高比例 */ 
    justify-content: center; /* 垂直居中 */ 
    align-items: center; /* 水平居中*/ 
video { 
    width: 100%; 
    height: 100%; 
.dialog-main { 
    width: 98%; 
.dialog-div { 
    flex-direction: column; /* 垂直排列 */ 
    align-items: center; /* 水平居中 */ 
.inner-txt { 
    width: 98%; 
    margin-top: 20px; 
    flex-direction: column; 
    align-items: center; 
    justify-content: space-around; /* 项目位于各行之前、之间、之后都留有空白的容器内 */ 
.txt { 
    font-size: 20px; 
.inner-btn { 
    width: 98%; 
    justify-content: space-around; 
    align-items: center; 
    margin-top: 20px; 
    margin-bottom: 20px; 
#timeDialog .dialog-div .inner-txt { 
    margin-top: 20px; 
    margin-bottom: 20px; 
    videoId: 'video', // 播放器id 
    url: '/common/video/1.mp4', // 视频地址 
    posterUrl: '/common/images/bg-tv.jpg', // 视频预览的海报路径 
    controlShow: true, // 是否显示控制栏 
    loop: true, // 是否循环播放 
    startTime: 10, // 播放开始时间 
    speed: 0.2, // 播放速度 
    isfullscreenchange: false // 是否全屏 
        
这些值的具体含义，可以参考如下表格：
          
key
 
description
          
autoplay
 
是否自动播放。
 
          
videoId
 
播放器id。
 
          
url
 
视频地址。
 
          
posterUrl
 
视频预览海报路径。
 
          
controlShow
 
是否显示控制栏。
 
          
loop
 
是否循环播放。
 
          
startTime
 
播放开始时间。
 
          
speed
 
播放速度。
 
          
isfullscreenchange
 
是否全屏。
 
        
接下来在export
          default的data对象后面继续添加如下代码，当视频初始化完成、开始播放、暂停、拖动进度条、进入/退出全屏、播放完成时触发以下事件：
        
// 视频准备完成时触发该事件 
prepared(e) { 
	this.showPrompt("视频时长：" + e.duration + "秒"); 
// 视频开始播放 
start() { 
	this.showPrompt("视频开始播放"); 
// 视频暂停播放 
pause() { 
	this.showPrompt("视频暂停播放"); 
// 视频播放完成 
finish() { 
	this.$element('confirmDialog').show(); 
// 拖动进度条调用 
seeked(e) { 
	this.showPrompt("设置播放进度：" + e.currenttime + "秒"); 
// 播放进度变化调用 
timeupdate(e) { 
// 自带组件进入全屏和退出全屏 
fullscreenchange(e) { 
	if (e.fullscreen === 1) { 
		this.isfullscreenchange = true; 
	} else { 
		this.isfullscreenchange = false; 
// 长按屏幕视频进入和退出全屏时触发事件 
longPressFullscreenchange() { 
	if (this.isfullscreenchange) { // 全屏 
		this.$element('video').exitFullscreen(); 
		this.isfullscreenchange = false; 
	} else { // 非全屏 
		this.$element('video').requestFullscreen({ screenOrientation : 'default' }); 
		this.isfullscreenchange = true; 
// dialog确定 
confirm() { 
	this.$element('video').start(); 
	this.$element('confirmDialog').close(); 
// dialog取消 
cancel() { 
	this.$element('confirmDialog').close(); 
// 弹框 
showPrompt(msg) { 
	prompt.showToast({ 
		message: msg, 
		duration: 1000, 
// 点击视频 
hideControls() { 
	this.controlShow = !this.controlShow; 
        
到此我们已经完成了所有的任务和代码的编写。