日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
教你如何在JS模板里添加音頻/視頻

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

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、做網(wǎng)站服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)麗水免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

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

https://harmonyos.

前言

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

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

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

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

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

(1)視頻的準(zhǔn)備prepared

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

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

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

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

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

(3)進(jìn)度條的時間顯示

播放狀態(tài)的時間進(jìn)度獲取 及 拖拽進(jìn)度條的時間進(jìn)度更新，先在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)暫停及播放的點擊事件

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

 
 
 
 
      
  
  
  
  1. change_start_pause: function() {//暫?；虿シ?nbsp;
    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)，設(shè)一個布爾型變量并在data里賦初值

 
 
 
 
      
  
  
  
  1. isfullscreenchange: false 
    2.

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

 
 
 
 
      
  
  
  
  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.

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

結(jié)語

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

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

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

video_js.rar

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

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

https://harmonyos.


分享標(biāo)題：教你如何在JS模板里添加音頻/視頻
轉(zhuǎn)載來源：http://www.dlmjj.cn/article/djgiceo.html