[[422399]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

前言

這次我的小分享是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 文件里刪除以下代碼

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

 然后再加一個容器組件，該容器組件里放我們要添加的媒體組件，"src"對應的是媒體文件所在位置，這里我的媒體文件名是“video.mp4”，以下分別是自動播放的設置、組件的長寬及視頻源縮放類型(詳情可以看上面的介紹,自行設定)、視頻播放的控制欄、各種事件名稱，所添加的代碼如下：

<div> 
        <video id='videoId' 
 
               src='/common/video.mp4' 
               autoplay='false' 
               style="object-fit:fill;width: 100%;height: 40%; " 
               controls="true" 
               onprepared='preparedCallback' 
               onstart='startCallback' 
               onpause='pauseCallback' 
               onfinish='finishCallback' 
               onerror='errorCallback' 
               onseeking='seekingCallback' 
               onseeked='seekedCallback' 
               ontimeupdate='timeupdateCallback' 
               onlongpress='change_fullscreenchange' 
               onclick="change_start_pause" 
             ></video> 
    </div> 

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

.container { 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 

3.添加對應事件

在entry>src>main>js>default>pages.index>index.js 文件里，先在data中給event賦初值，對于視頻的播放會涉及視頻的準備、播放、暫停、結束、播放失敗、進度條的時間顯示(播放狀態的時間進度、拖拽進度條的時間進度、總時長)、全屏的進入與退出

(1)視頻的準備prepared

該事件帶有參數duration,通過duration可以獲取視頻時長，單位為s;除此之外還可以根據需要設置事件

preparedCallback:function(e){ this.event = '視頻連接成功'; this.duration = e.duration;}, 

 別忘了要在上面的data里給duration賦初值

(2)視頻的播放、暫停、結束、播放失敗的事件設置(舉例)

startCallback:function(){ this.event = '視頻開始播放';}, 
    pauseCallback:function(){ this.event = '視頻暫停播放'; }, 
    finishCallback:function(){ this.event = '視頻播放結束';}, 
    errorCallback:function(){ this.event = '視頻播放錯誤';}, 

(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變為假;相反，當isStart為假時表示視頻是暫停狀態，這時點擊會促發==觸發方法播放start，且isStart變為真

change_start_pause: function() {//暫?；虿シ?nbsp;
       if(this.isStart) { 
           this.$element('videoId').pause(); 
           this.isStart = false; 
       } else { 
           this.$element('videoId').start(); 
           this.isStart = true; 
       } 
   } 

 (5)全屏播放及退出

同(4)，設一個布爾型變量并在data里賦初值

isfullscreenchange: false 

真表示為全屏狀態，假表示非全屏狀態，若isfullscreenchange為真，則點擊放縮箭頭時會退出全屏，且isfullscreenchange變為假;若isfullscreenchange為假，則會進入全屏，且isfullscreenchange變為真

change_fullscreenchange: function() {//全屏 
        if(!this.isfullscreenchange) { 
            this.$element('videoId').requestFullscreen({ screenOrientation : 'default' }); 
            this.isfullscreenchange = true; 
        } else { 
            this.$element('videoId').exitFullscreen(); 
            this.isfullscreenchange = false; 
        } 
    } 

以上幾步是添加視頻的簡單小分享，如果單純只添加音頻則相對簡單些，只需要 ①將路徑文件改為相應的音頻文件路徑， ②全屏事件及一些其他事件可以視情況作刪減。

結語

此外，因為循環播放事件只支持API6+，所以如果想循環播放的話，我想到的辦法是設一個布爾型變量，在要媒體源播放的生命周期里其值均為真，在要它結束播放的生命周期里比如onDestroy里其值為假，然后在播放結束事件finishCallback里，如果該布爾型變量為真，則觸發方法播放start。

辦法也還有好多種呢，以上就是我這次的小分享啦(●ˇ∀ˇ●)

文章相關附件可以點擊下面的原文鏈接前往下載

video_js.rar

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com