[[422399]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

前言

這次我的小分享是JS中添加媒體組件，雖然這個組件是視頻播放組件，但是換湯不換藥，還可以添加音頻哦，下面以一個簡單的例子講解O(∩_∩)O

(模擬器播放不了聲音哦，所以建議在真機上調(diào)試;如果你去看文檔你會發(fā)現(xiàn)有一些屬性名稱的右上角有個6+，這是要在API為6及以上才能適用，由于我的設(shè)備的API是5，所以下面講解的都不涉及支持API6+的)

概述

JS中的媒體組件——視頻播放組件，效果圖如下：

橫屏

正文

一、視頻播放組件的屬性、樣式、事件、方法介紹

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

二、JS中添加視頻/音頻

1.創(chuàng)建一個空白的工程

DevEco Studio下載安裝成功后，打開DevEco Studio，點擊左上角的File，點擊New，再選擇New Project，選擇Empty Ability(JS),然后點擊Next,給項目命名 video_js ，選擇設(shè)備類型Phone，最后點擊Finish。

2.創(chuàng)建一個視頻播放組件

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

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

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

<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.添加對應(yīng)事件

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

(1)視頻的準備prepared

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

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

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

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

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

(3)進度條的時間顯示

播放狀態(tài)的時間進度獲取 及 拖拽進度條的時間進度更新，先在data里賦初值

seekingtime:'', 
timeupdatetime:'', 

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

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

 (4)暫停及播放的點擊事件

設(shè)一個布爾型變量isStart，在data里賦初值true。當isStart為真時表示視頻是播放狀態(tài)，這時點擊就會觸發(fā)方法暫停pause，且isStart變?yōu)榧?相反，當isStart為假時表示視頻是暫停狀態(tài)，這時點擊會促發(fā)==觸發(fā)方法播放start，且isStart變?yōu)檎?/p>

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)，設(shè)一個布爾型變量并在data里賦初值

isfullscreenchange: false 

真表示為全屏狀態(tài)，假表示非全屏狀態(tài)，若isfullscreenchange為真，則點擊放縮箭頭時會退出全屏，且isfullscreenchange變?yōu)榧?若isfullscreenchange為假，則會進入全屏，且isfullscreenchange變?yōu)檎?/p>

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

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

結(jié)語

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

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

文章相關(guān)附件可以點擊下面的原文鏈接前往下載

video_js.rar

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com