更多内容请访问：https://harmonyos.51cto.com与华为官方共建的鸿蒙技术社区Preface这次我的小分享是添加一个JS中的媒体组件。该组件虽然是视频播放组件，但是也可以添加音频。这里用一个简单的例子来说明O(∩_∩)O(模拟器不能播放声音，所以建议在真机上调试；看文档会发现里面有一个6+一些属性名的右上角，只有在API为6以上时才能应用。由于我的设备API是5，下面我将说明它们都不支持API6+）JS中的媒体组件概述-视频播放组件，效果图如下：横屏文字1.视频播放组件的属性、样式、事件、方法介绍，仅展示支持API5的部分，更多内容请查看官方文档。二、在JS中添加视频/音频1、新建一个空白工程。)，然后点击Next，将项目命名为video_js，选择设备类型Phone，最后点击Finish。2、创建一个视频播放组件，在entry>src>main>js>default>pages.index>index.hml文件中删除如下代码删除entry>src>main>js>default>pages.index>index.css文件中除容器外的部分，最后文件的代码为如下：.container{flex-direction:column;证明内容：居中；对准它ems:center;}3.在entry>src>main>js>default>pages.index>index.js文件中添加对应的事件，先给data中的事件赋初值，视频播放会涉及到视频准备、播放、暂停、结束、播放失败、进度条时间显示（播放状态时间进度、拖动进度条时间进度、总时长）、全屏进入退出（1）videopreparation这个事件有参数duration，可以通过duration获取视频的时长，单位s；另外事件preparedCallback:function(e){this.event='videoconnectionissuccessful';this.duration=e.duration;}也可以根据需要设置，别忘了给上述数据中的duration（2）视频播放、暂停、结束、播放失败的事件设置（例如）startCallback:function(){this.event='视频开始播放';},pauseCallback:function(){this.event='视频暂停播放';},finishCallback:function(){this.event='视频播放结束';},errorCallback:function(){this.event='视频Playerror';},(3)进度条的时间显示播放状态的时间进度和拖动进度条的时间进度更新。先在data中赋初值seekingtime:'',timeupdatetime:''，然后在data下面添加事件代码seekingCallback:function(e){this.seekingtime=e.currenttime;},timeupdateCallback:function(e){this.timeupdatetime=e.currenttime;},(4)设置一个布尔值用于暂停和播放点击事件类型变量isStart，在data中赋初值true当isStart为真时，表示正在播放视频。此时点击会触发暂停pause方法，isStart变为false；相反，当isStart为false时，表示视频处于暂停状态。此时点击会触发==触发方法Play开始，isStart变为truechange_start_pause:function(){//暂停或播放if(this.isStart){this.$element('videoId').pause();this.isStart=false;}else{this.$element('videoId').start();this.isStart=true;}}(5)全屏播放和退出同(4)，设置一个数据中的布尔变量并赋初值isfullscreenchange:false表示true如果isfullscreenchange为true，则点击缩放箭头时退出全屏，isfullscreenchange变为false；如果isfullscreenchange为false，则进入全屏，isfullscreenchange变为truechange_fullscreenchange:function(){//全屏if(!this.isfullscreenchange){this.$element('videoId').requestFullscreen({screenOrientation:'default'});this.isfullscreenchange=true;}else{this.$element('videoId').exitFullscreen();this.isfullscreenchange=false;}}以上步骤是添加视频的简单分享。如果只添加音频，就比较简单了。你只需要①把路径文件改成对应的音频文件路径，②全屏事件和其他一些事件可以根据情况删除。结语另外，因为循环播放事件只支持API6+，所以如果要循环播放，我想到的办法是设置一个布尔变量，在要播放的媒体源的生命周期内它的值为true，并且当需要结束播放时在生命周期中，比如onDestroy中的值为false，然后在播放结束事件finishCallback中，如果布尔变量为true，则触发该方法播放开始。方法有很多，以上就是我这次的小分享(●ˇ?ˇ●)文章相关附件可以点击下方链接下载原文video_js.rar更多内容请访问：和华为官方Harmonyos技术社区共建https://harmonyos.51cto.com
