文簡(jiǎn)介

在剛接觸 p5.js 時(shí)我以為這只是一個(gè)藝術(shù)方向的 canvas 庫，沒想到它還支持視頻文件和視頻流的播放。

本文簡(jiǎn)單講講如何使用 P5.js 播放視頻。

播放視頻文件

p5.js 除了可以使用 video 元素播放視頻外，還支持使用 image 控件播放視頻。

方式1：video元素播放視頻

基礎(chǔ)用法

p5.js 的 createVideo() 方法可以創(chuàng)建一個(gè) <video> 元素。

createVideo(src, [callback]) 可以傳入2個(gè)參數(shù)：

• src: 視頻路徑（必傳）。可以傳一個(gè)字符串類型的視頻路徑；也可以傳入字符串?dāng)?shù)組類型，指定多個(gè)路徑支持不同瀏覽器。
• callback: 回調(diào)函數(shù)（非必傳）。在視頻加載完成時(shí)觸發(fā)。

錄制 GIF 后比較卡，將就看著吧~

// 加載本地視頻
let playing=false // 播放狀態(tài)
let video=null // 視頻
let button=null // 按鈕

// 視頻加載完成的回調(diào)函數(shù)
function afterLoad() {
  console.log('加載完成')
}

// 加載資源的生命周期
function preload() {
  video=createVideo('assets/02.mp4', afterLoad)
}

// 初始化的生命周期
function setup() {
  noCanvas()
  button=createButton('播放')
  button.mousePressed(toggleVid)
}

// 點(diǎn)擊按鈕的事件
function toggleVid() {
  if (playing) {
    video.pause()
    button.html('播放')
  } else {
    video.loop()
    button.html('暫停')
  }
  playing=!playing;
}

粗略講講上面這段代碼。

• preload() 是 p5.js 提供的一個(gè)生命周期，我們通常會(huì)將“加載靜態(tài)資源”這個(gè)步驟放在 preload() 里執(zhí)行。在 《p5.js光速入門》的圖片 章節(jié)里介紹過。
• setup() 是一個(gè)初始化的生命周期。
• createVideo() 方法加載視頻。第二個(gè)參數(shù)傳入回調(diào)函數(shù) afterLoad，在加載完視頻資源后會(huì)執(zhí)行回調(diào)函數(shù)。
• video.loop() 方法可以播放視頻。
• video.pause() 方法可以暫停視頻。
• noCanvas() 方法用來隱藏 <canvas> 元素，因?yàn)槲覀兪褂?createVideo() 會(huì)在頁面創(chuàng)建一個(gè) <video> 元素，所以我們就不需要 <canvas> 元素了。

播放方法

除了 video.loop() 方法，還可以使用 video.play() 播放視頻。loop 是循環(huán)播放；play 只播放一次，播完就暫停。

傳入多個(gè)視頻地址

createVideo() 方法的第一個(gè)參數(shù)除了傳入一個(gè)字符串類型的視頻地址外，還可以傳入字符串?dāng)?shù)組，作用就是兼容處理。

比如你的視頻資源只有 2.mp4，你希望可以先播放 1.mp4，沒有這個(gè)視頻再播放 2.mp4，就可以這樣寫：

createVideo(['1.mp4', '2.mp4'])

但通常我們不會(huì)這樣寫，通常我們會(huì)給同一個(gè)視頻提供不同的視頻格式，然后用這種方法傳入多個(gè)視頻地址。

因?yàn)橛行g覽器不一定支持你想播放的地址，此時(shí)就可以做個(gè)保底處理。

設(shè)置視頻窗口尺寸

使用 createVideo() 方法創(chuàng)建完視頻后，可以通過 size(width, height) 設(shè)置視頻的寬高。

let video=null

function preload() {
  video=createVideo('assets/02.mp4')
  video.size(300, 600)
}

設(shè)置音量

使用 createVideo() 創(chuàng)建的視頻控件可以使用 volume() 設(shè)置視頻的音量，該方法接受1個(gè)參數(shù)，參數(shù)值在 0~1 之間。

let video=null

function preload() {
  video=createVideo('assets/02.mp4', videoLoaded)
}

function videoLoaded() {
  video.volume(0.5) // 將視頻音量設(shè)置為50%
}

方式2：用image控件播放視頻

一開始我也沒想到 image 控件可以播放視頻，誤打誤撞試出來的。

這次我就不錄屏了，工友們自己運(yùn)行試試看吧。

let playing=false
let video=null
let button=null

function preload() {
  video=createVideo('assets/02.mp4')
}

function setup() {
  video.hide()
  createCanvas(568, 320)
  button=createButton('播放')
  button.mousePressed(toggleVid)
}

function draw() {
  image(video, 0, 0)
}

function toggleVid() {
  if (playing) {
    video.pause();
    button.html('播放');
  } else {
    video.loop();
    button.html('暫停');
  }
  playing=!playing;
}

上面的代碼中，我在 setup() 里使用了 video.hide() 方法將 createVideo() 創(chuàng)建出來的 <video> 元素隱藏起來，因?yàn)檫@次我們需要將視頻渲染到畫布中，所以不再需要 <video> 了。

接著我們?cè)?draw() 里用 image 不斷刷新視頻，所以上面這樣寫是對(duì)的。

其他地方?jīng)]變化。

接入攝像頭

如果你的設(shè)備有攝像頭，p5.js 是支持調(diào)用攝像頭并將內(nèi)容展示在畫布上的。

let capture

function setup() {
  createCanvas(480, 360)
  capture=createCapture(VIDEO)
  capture.hide()
}

function draw() {
  image(capture, 0, 0, capture.width, capture.height)
}

通過 createCapture() 方法創(chuàng)建一個(gè)包含攝像頭的音頻/視頻源 <video> 元素，把這個(gè)元素的內(nèi)容放在 p5.js 的 image 控件里。

這個(gè)默認(rèn)是顯示的，而且它是一個(gè)獨(dú)立的元素，默認(rèn)和畫布分離。所以使用 capture.hide() 方法把 <video> 元素隱藏起來，不然頁面中會(huì)出現(xiàn)兩個(gè)視頻窗口。

其他做法和前面的【方式2】差不多，這里就不再啰嗦了。

推薦閱讀

《p5.js 光速入門》

《p5.js 使用npm安裝p5.js后如何使用？》

《p5.js 變換操作》

《p5.js 3D圖形-立方體》

《p5.js 開發(fā)點(diǎn)彩畫派的繪畫工具》

《p5.js畫布操作實(shí)戰(zhàn)：創(chuàng)建，綁定指定元素，動(dòng)態(tài)調(diào)整大小，隱藏滾動(dòng)條，刪除畫布》

點(diǎn)贊 + 關(guān)注 + 收藏=學(xué)會(huì)了

<div id="player"></div>

<script src="http://cdn.jsdelivr.net/npm/xgplayer/browser/index.js" charset="utf-8"></script>
<script src="http://cdn.jsdelivr.net/npm/xgplayer-flv.js/browser/index.js" charset="utf-8"></script>
<script type="text/javascript">
 new window.FlvJsPlayer({
 id: 'player',
 isLive: false,
 playsinline: true,
 url: '/test/test.flv',
 autoplay: true,
 height: window.innerHeight,
 width: window.innerWidth
 });
</script>

emo：

```html

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video（視頻）：在網(wǎng)頁中播放視頻的簡(jiǎn)單方法</title>
</head>
<body>
<h1>HTML5 Video（視頻）：在網(wǎng)頁中播放視頻的簡(jiǎn)單方法</h1>
<p>下面是一個(gè)使用HTML5 Video標(biāo)簽在網(wǎng)頁中播放視頻的示例：</p>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<p>上述代碼將呈現(xiàn)出一個(gè)帶有控制條的視頻播放器，并在其中播放指定的視頻文件。視頻文件可以是MP4格式（<code>.mp4</code>）或WebM格式（<code>.webm</code>）。</p>
<p>在上述代碼中，我們使用了HTML5的Video標(biāo)簽來嵌入視頻。通過設(shè)置<code>width</code>屬性，我們可以指定視頻播放器的寬度。通過設(shè)置<code>controls</code>屬性，我們可以啟用控制條，讓用戶可以控制視頻的播放和暫停。</p>
<p>在<code>video</code>標(biāo)簽內(nèi)部，我們使用了<code>source</code>標(biāo)簽來指定視頻文件的URL和類型。在示例中，我們提供了兩個(gè)不同格式的視頻文件，以便在不同瀏覽器中兼容播放。</p>
<p>如果用戶的瀏覽器不支持HTML5 Video標(biāo)簽或指定的視頻文件格式，則會(huì)顯示<code>Your browser does not support the video tag.</code>的提示信息。</p>
<p>通過使用HTML5 Video功能，我們可以在網(wǎng)頁中方便地播放視頻，為用戶提供更加豐富和多樣化的內(nèi)容。視頻可以應(yīng)用于各種場(chǎng)景，如教育、娛樂、廣告等。</p>
</body>
</html>

```

以上是一篇使用HTML5 Video標(biāo)簽在網(wǎng)頁中播放視頻的文章，其中包含了示例代碼和一些相關(guān)說明。通過使用HTML5的Video標(biāo)簽，我們可以在網(wǎng)頁中方便地嵌入和播放視頻。在示例中，我們使用了兩種不同格式的視頻文件，以便在不同瀏覽器中兼容播放。通過設(shè)置Video標(biāo)簽的屬性，如寬度和控制條，我們可以定制視頻播放器的外觀和功能。通過使用HTML5 Video功能，我們可以為用戶提供更加豐富和多樣化的內(nèi)容，如教育、娛樂、廣告等。請(qǐng)注意，在使用視頻功能時(shí)，需要確保視頻文件的合法性和版權(quán)問題。

我是永不低頭的熊，喜歡美食、健身，當(dāng)然也喜歡寫代碼，每天不定時(shí)更新各類編程相關(guān)的文章，希望你在碼農(nóng)這條路上不再孤單！