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

想了解更多内容，请访问：

专注于为中小企业提供成都网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业丽水免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

https://harmonyos.

前言

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

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

概述

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

横屏

正文

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

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

二、JS中添加视频/音频

1.创建一个空白的工程

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

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

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

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.       {{ $t('strings.hello') }} {{ title }} 
    3.   
  
  
  
  3.    
    4.

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

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

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

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

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;}, 
    2.

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

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

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

(3)进度条的时间显示

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

 
 
 
 
      
  
  
  
  1. seekingtime:'', 
    2.   
  
  
  
  2. timeupdatetime:'', 
    3.

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

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

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

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

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

 (5)全屏播放及退出

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

 
 
 
 
      
  
  
  
  1. isfullscreenchange: false 
    2.

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

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

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

结语

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

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

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

video_js.rar

想了解更多内容，请访问：

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

https://harmonyos.

新闻标题：教你如何在JS模板里添加音频/视频
链接URL：http://www.shufengxianlan.com/qtweb/news9/491209.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站设计知识

同城分类信息

网站定制　　 　成都企业网站建设　　 　成都网站建设公司　　 　西信服务器托管　　 　内江做网站　　 　四川和正源　　 　高端网站建设　　 　成都网站推广　　 　成都网站推广　　 　成都模板网站　　 　成都网络营销公司　　 　网络推广外包　　 　简阳做网站　　 　大吉雪茄　　 　雅安机房托管　　 　app开发　　 　广告媒介投放　　 　成都网站优化　　 　主动防护网　　 　九针服饰