教你如何在JS模板里添加音频/视频

开发 前端
这次我的小分享是JS中添加媒体组件,虽然这个组件是视频播放组件,但是换汤不换药,还可以添加音频哦,下面以一个简单的例子讲解。

[[422399]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

前言

这次我的小分享是JS中添加媒体组件,虽然这个组件是视频播放组件,但是换汤不换药,还可以添加音频哦,下面以一个简单的例子讲解O(∩_∩)O

(模拟器播放不了声音哦,所以建议在真机上调试;如果你去看文档你会发现有一些属性名称的右上角有个6+,这是要在API为6及以上才能适用,由于我的设备的API是5,所以下面讲解的都不涉及支持API6+的)

概述

JS中的媒体组件——视频播放组件,效果图如下:

横屏

正文

一、视频播放组件的属性、样式、事件、方法介绍

【木棉花】:JS模板里添加音频/视频-鸿蒙HarmonyOS技术社区
【木棉花】:JS模板里添加音频/视频-鸿蒙HarmonyOS技术社区
【木棉花】:JS模板里添加音频/视频-鸿蒙HarmonyOS技术社区
【木棉花】:JS模板里添加音频/视频-鸿蒙HarmonyOS技术社区

只展示了支持API5的部分,更多请查看 官方文档

二、JS中添加视频/音频

1.创建一个空白的工程

DevEco Studio下载安装成功后,打开DevEco Studio,点击左上角的File,点击New,再选择New Project,选择Empty Ability(JS),然后点击Next,给项目命名 video_js ,选择设备类型Phone,最后点击Finish。

【木棉花】:JS模板里添加音频/视频-鸿蒙HarmonyOS技术社区

2.创建一个视频播放组件

在entry>src>main>js>default>pages.index>index.hml 文件里删除以下代码

  1. <text class="title"
  2.       {{ $t('strings.hello') }} {{ title }} 
  3.   </text> 

 然后再加一个容器组件,该容器组件里放我们要添加的媒体组件,"src"对应的是媒体文件所在位置,这里我的媒体文件名是“video.mp4”,以下分别是自动播放的设置、组件的长宽及视频源缩放类型(详情可以看上面的介绍,自行设定)、视频播放的控制栏、各种事件名称,所添加的代码如下:

  1. <div> 
  2.         <video id='videoId' 
  3.  
  4.                src='/common/video.mp4' 
  5.                autoplay='false' 
  6.                style="object-fit:fill;width: 100%;height: 40%; " 
  7.                controls="true" 
  8.                onprepared='preparedCallback' 
  9.                onstart='startCallback' 
  10.                onpause='pauseCallback' 
  11.                onfinish='finishCallback' 
  12.                onerror='errorCallback' 
  13.                onseeking='seekingCallback' 
  14.                onseeked='seekedCallback' 
  15.                ontimeupdate='timeupdateCallback' 
  16.                onlongpress='change_fullscreenchange' 
  17.                onclick="change_start_pause" 
  18.              ></video> 
  19.     </div> 

 在entry>src>main>js>default>pages.index>index.css 文件里删除 除了container以外的部分,最后该文件的代码如下:

  1. .container { 
  2.     flex-direction: column
  3.     justify-content: center; 
  4.     align-items: center; 

3.添加对应事件

在entry>src>main>js>default>pages.index>index.js 文件里,先在data中给event赋初值,对于视频的播放会涉及视频的准备、播放、暂停、结束、播放失败、进度条的时间显示(播放状态的时间进度、拖拽进度条的时间进度、总时长)、全屏的进入与退出

(1)视频的准备prepared

该事件带有参数duration,通过duration可以获取视频时长,单位为s;除此之外还可以根据需要设置事件

  1. preparedCallback:function(e){ this.event = '视频连接成功'; this.duration = e.duration;}, 

 别忘了要在上面的data里给duration赋初值

(2)视频的播放、暂停、结束、播放失败的事件设置(举例)

  1. startCallback:function(){ this.event = '视频开始播放';}, 
  2.     pauseCallback:function(){ this.event = '视频暂停播放'; }, 
  3.     finishCallback:function(){ this.event = '视频播放结束';}, 
  4.     errorCallback:function(){ this.event = '视频播放错误';}, 

(3)进度条的时间显示

播放状态的时间进度获取 及 拖拽进度条的时间进度更新,先在data里赋初值

  1. seekingtime:''
  2. timeupdatetime:''

 然后在data下方添加事件代码

  1. seekingCallback:function(e){ this.seekingtime = e.currenttime; }, 
  2.  timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;}, 

 (4)暂停及播放的点击事件

设一个布尔型变量isStart,在data里赋初值true。当isStart为真时表示视频是播放状态,这时点击就会触发方法暂停pause,且isStart变为假;相反,当isStart为假时表示视频是暂停状态,这时点击会促发==触发方法播放start,且isStart变为真

  1. change_start_pause: function() {//暂停或播放 
  2.        if(this.isStart) { 
  3.            this.$element('videoId').pause(); 
  4.            this.isStart = false
  5.        } else { 
  6.            this.$element('videoId').start(); 
  7.            this.isStart = true
  8.        } 
  9.    } 

 (5)全屏播放及退出

同(4),设一个布尔型变量并在data里赋初值

  1. isfullscreenchange: false 

真表示为全屏状态,假表示非全屏状态,若isfullscreenchange为真,则点击放缩箭头时会退出全屏,且isfullscreenchange变为假;若isfullscreenchange为假,则会进入全屏,且isfullscreenchange变为真

  1. change_fullscreenchange: function() {//全屏 
  2.         if(!this.isfullscreenchange) { 
  3.             this.$element('videoId').requestFullscreen({ screenOrientation : 'default' }); 
  4.             this.isfullscreenchange = true
  5.         } else { 
  6.             this.$element('videoId').exitFullscreen(); 
  7.             this.isfullscreenchange = false
  8.         } 
  9.     } 

以上几步是添加视频的简单小分享,如果单纯只添加音频则相对简单些,只需要 ①将路径文件改为相应的音频文件路径, ②全屏事件及一些其他事件可以视情况作删减。

结语

此外,因为循环播放事件只支持API6+,所以如果想循环播放的话,我想到的办法是设一个布尔型变量,在要媒体源播放的生命周期里其值均为真,在要它结束播放的生命周期里比如onDestroy里其值为假,然后在播放结束事件finishCallback里,如果该布尔型变量为真,则触发方法播放start。

办法也还有好多种呢,以上就是我这次的小分享啦(●ˇ∀ˇ●)

文章相关附件可以点击下面的原文链接前往下载

video_js.rar

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2011-01-19 11:17:20

2018-04-08 08:32:59

2011-08-01 18:34:59

组策略编辑器管理模板

2022-08-12 08:38:52

FFmpegLinux命令

2021-02-22 08:19:49

js前端元素

2011-02-21 14:10:33

QmailSMTP

2022-12-25 17:49:55

Ubuntu媒体音频Linux

2020-12-15 09:26:20

LinuxVLAN命令

2019-11-18 10:00:05

Linux桌面添加用户

2011-02-21 17:32:37

Vsftpd

2011-01-21 10:50:53

Sendmail

2013-05-22 09:59:10

HTML 5音频

2022-04-27 08:55:01

Spring外部化配置

2009-09-23 13:04:58

HibernateOracle sequ

2014-11-06 09:36:50

OVSvlan

2009-03-04 10:38:36

虚拟桌面模板桌面虚拟化Xendesktop

2019-03-28 09:25:51

Linux磁盘命令

2009-02-16 19:02:44

KDE桌面启动程序

2021-04-27 07:00:08

UbuntuLinux指纹登录

2013-12-11 10:21:31

点赞
收藏

51CTO技术栈公众号