介紹

你想知道如何在你的應(yīng)用程序中實(shí)現(xiàn)React 視頻播放器嗎？您有客戶要求還是想自己學(xué)習(xí)？無(wú)論哪種情況，我們都在這里為您提供幫助。

我們的團(tuán)隊(duì)為初學(xué)者帶來(lái)了教程：如何創(chuàng)建 React 視頻播放器（第 1 部分）。您知道該練習(xí)，按照分步說(shuō)明進(jìn)行操作直到最后，然后與我們一起實(shí)施或克隆上一節(jié)的源代碼。選擇最適合你的，然后開(kāi)始編碼吧，我的朋友！

讓我們討論本教程的目標(biāo)和先決條件。

教程目標(biāo)和先決條件：反應(yīng)視頻播放器

教程目標(biāo)

• 基本項(xiàng)目設(shè)置和安裝

• 帶有 React 視頻播放器的簡(jiǎn)單演示應(yīng)用程序

• 源代碼

視頻播放器應(yīng)用程序能夠在此平臺(tái)上播放視頻：

• YouTube

• Facebook

• 維密歐

• 每日運(yùn)動(dòng)

• 聲云

• 紫藤

• 特維科

• 混云

先決條件

• ReactJS 基礎(chǔ)知識(shí)

• 熟悉安裝依賴項(xiàng)

• 熟悉組件的樣式及其響應(yīng)能力

節(jié)省高達(dá) 40% 的開(kāi)發(fā)、維護(hù)和支持成本
聯(lián)系我們并聘請(qǐng) Reactjs 開(kāi)發(fā)人員來(lái)提升您的產(chǎn)品開(kāi)發(fā)能力

創(chuàng)建一個(gè)新的 ReactJS 項(xiàng)目

使用以下命令創(chuàng)建一個(gè)新的 reactJS 項(xiàng)目。

yarn create react-app 反應(yīng)視頻播放器

運(yùn)行應(yīng)用程序

使用以下命令運(yùn)行應(yīng)用程序，只是為了檢查我們是否已成功創(chuàng)建項(xiàng)目。

cd 反應(yīng)視頻播放器紗線開(kāi)始

執(zhí)行上述命令后，我們的應(yīng)用程序?qū)⒊晒\(yùn)行。這是您將看到的默認(rèn)屏幕。

代碼清理

為了使用React 視頻播放器實(shí)現(xiàn)我們的主要功能，我們將打開(kāi) App.js 文件并刪除不必要的代碼。

// 應(yīng)用程序.js

功能應(yīng)用程序（）{
  返回 （
    <div className="應(yīng)用程序">
    </div>
    
    );}導(dǎo)出默認(rèn)應(yīng)用程序；

安裝反應(yīng)播放器

現(xiàn)在為了創(chuàng)建一個(gè) React 視頻播放器，我們將首先安裝 react-player 包。同樣使用下面的命令。

紗線添加反應(yīng)播放器

讓我們編碼

在 App.js 中導(dǎo)入 react-player 包。

從 'react-player' 導(dǎo)入 ReactPlayer

導(dǎo)入 react-player 后，我們將更改 JSX 代碼，為此我們將編寫(xiě)這些代碼行。添加完代碼后，您的 App.js 文件將如下所示。

// 應(yīng)用程序.js

從 'react-player' 導(dǎo)入 ReactPlayer功能應(yīng)用程序（）{
  返回 （
    <div className="應(yīng)用程序">
     <ReactPlayer url='https://www.youtube.com/watch?v=BQwj6A99oVc' />
    </div>
    );}導(dǎo)出默認(rèn)應(yīng)用程序；

現(xiàn)在我們的演示應(yīng)用程序?qū)⑷缦滤尽?/span>

React Video Player 演示應(yīng)用程序：設(shè)置響應(yīng)度

完成 React 視頻播放器的基本實(shí)現(xiàn)后，我們現(xiàn)在將為應(yīng)用程序的響應(yīng)性編寫(xiě)代碼。為了使應(yīng)用程序響應(yīng)，我們將刪除 JSX 代碼，然后添加新的代碼行。

 <div className="播放器包裝器">
      <反應(yīng)播放器
        className='react-player'
        url='https://www.youtube.com/watch?v=BQwj6A99oVc'
        寬度='100%'
        高度='100%'
      />
 </div>

并導(dǎo)入 App.css 文件。所以現(xiàn)在我們的 App.js 看起來(lái)像這樣。

從 'react-player' 導(dǎo)入 ReactPlayer；導(dǎo)入'./App.css'；功能應(yīng)用程序（）{
  返回 （
    <div className="播放器包裝器">
      <反應(yīng)播放器
        className='react-player'
        url='https://www.youtube.com/watch?v=BQwj6A99oVc'
        寬度='100%'
        高度='100%'
      />
    </div>
  );}導(dǎo)出默認(rèn)應(yīng)用程序；

打開(kāi) App.css 文件并清理以前的代碼。添加這些 css 樣式以使應(yīng)用程序響應(yīng)。

.player-wrapper {
  位置：相對(duì)；
  padding-top: 56.25% /* 玩家比例: 100 / (1280 / 720) */}.react-播放器{
  位置：絕對(duì)；
  頂部：0；
  左：0；}

瞧！完成我們的 React 視頻播放器演示應(yīng)用程序的響應(yīng)能力！您可以看到如下所示的結(jié)果。

Github 存儲(chǔ)庫(kù)：react-video-player-demo

這樣我們就成功地在 React.js 中實(shí)現(xiàn)了視頻播放器應(yīng)用程序。隨意克隆 github 存儲(chǔ)庫(kù)：react-video-player-demo并開(kāi)始探索更多內(nèi)容。

結(jié)論

（言鼎科技）