HTML5 video 視頻標(biāo)簽屬性詳解-前端小白必

HTML5 video 視頻標(biāo)簽屬性詳解-前端小白必學(xué)知識(shí)

靴們上網(wǎng)的話都知道，現(xiàn)在很多網(wǎng)站都提供視頻展示。我們?cè)谏弦黄P(guān)于HTML5文章中提到了HTML5支持視頻和音頻，現(xiàn)在小編帶大家學(xué)習(xí)一下吧！

創(chuàng)建簡(jiǎn)單的HTML5文件

HTML5文件名同樣后綴'.html'，我們?cè)趕ublime中可以使用輸入英文嘆號(hào)（!）,然后按tab鍵就能創(chuàng)建一個(gè)簡(jiǎn)單的HTML5文件：

一個(gè)簡(jiǎn)單的html5文檔：

video 視頻

<video>標(biāo)簽定義視頻。如下：

control 屬性供添加播放、暫停和音量控件。

瀏覽器中顯示：

<video> 與 </video> 之間插入的內(nèi)容是供不支持 video 元素的瀏覽器顯示的：

我們?cè)贗E7中打開看一下效果：

<video> 標(biāo)簽的其他屬性

1.autoplay屬性

Autoplay屬性用于設(shè)置視頻是否自動(dòng)播放，是一個(gè)布爾屬性。當(dāng)出現(xiàn)時(shí)，表示自動(dòng)播放，去掉是表示不自動(dòng)播放。

<video src="video/Disney.mp4" controls="controls" autoplay="autoplay">你的瀏覽器版本不支持視頻</video>

2.loop屬性

loop屬性用于指定視頻是否循環(huán)播放，同樣是一個(gè)布爾屬性。

<video src="video/Disney.mp4" controls="controls" autoplay="autoplay" loop="loop">你的瀏覽器版本不支持視頻</video>

3.preload屬性

此屬性用于定義視頻是否預(yù)加載。屬性有三個(gè)可選擇的值：none、metadata、auto。如果不使用此屬性，默認(rèn)為auto。

如果使用 "autoplay"，則忽略該屬性。

<video src="video/Disney.mp4" controls="controls" preload="none">你的瀏覽器版本不支持視頻</video>

None：不進(jìn)行預(yù)加載。使用此屬性值，可能是頁(yè)面制作者認(rèn)為用戶不期望此視頻，或者減少HTTP請(qǐng)求。

Metadata：部分預(yù)加載。使用此屬性值，代表頁(yè)面制作者認(rèn)為用戶不期望此視頻，但為用戶提供一些元數(shù)據(jù)（包括尺寸，第一幀，曲目列表，持續(xù)時(shí)間等等）。

Auto：全部預(yù)加載。

你必須非常努力，才能看起來(lái)毫不費(fèi)力！

關(guān)注小白前端，持續(xù)收到文章推送！

文簡(jiǎn)介

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

本文簡(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é)里介紹過(guò)。
setup() 是一個(gè)初始化的生命周期。
createVideo() 方法加載視頻。第二個(gè)參數(shù)傳入回調(diào)函數(shù) afterLoad，在加載完視頻資源后會(huì)執(zhí)行回調(diào)函數(shù)。
video.loop() 方法可以播放視頻。
video.pause() 方法可以暫停視頻。
noCanvas() 方法用來(lái)隱藏 <canvas> 元素，因?yàn)槲覀兪褂?createVideo() 會(huì)在頁(yè)面創(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)建完視頻后，可以通過(guò) 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 控件可以播放視頻，誤打誤撞試出來(lái)的。

這次我就不錄屏了，工友們自己運(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)建出來(lái)的 <video> 元素隱藏起來(lái)，因?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)
}

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

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

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

整合營(yíng)銷服務(wù)商