在剛接觸 p5.js 時(shí)我以為這只是一個(gè)藝術(shù)方向的 canvas 庫,沒想到它還支持視頻文件和視頻流的播放。
本文簡(jiǎn)單講講如何使用 P5.js 播放視頻。
p5.js 除了可以使用 video 元素播放視頻外,還支持使用 image 控件播放視頻。
p5.js 的 createVideo() 方法可以創(chuàng)建一個(gè) <video> 元素。
createVideo(src, [callback]) 可以傳入2個(gè)參數(shù):
錄制 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;
}
粗略講講上面這段代碼。
除了 video.loop() 方法,還可以使用 video.play() 播放視頻。loop 是循環(huán)播放;play 只播放一次,播完就暫停。
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è)保底處理。
使用 createVideo() 方法創(chuàng)建完視頻后,可以通過 size(width, height) 設(shè)置視頻的寬高。
let video=null
function preload() {
video=createVideo('assets/02.mp4')
video.size(300, 600)
}
使用 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%
}
一開始我也沒想到 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ì)了
、HTML代碼如下:
<div id="player"></div>
二、JavaScript代碼如下:
<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)這條路上不再孤單!
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。