HTML5 video 視頻標簽屬性詳解-前端小白必

HTML5 video 視頻標簽屬性詳解-前端小白必學知識

靴們上網的話都知道，現在很多網站都提供視頻展示。我們在上一篇關于HTML5文章中提到了HTML5支持視頻和音頻，現在小編帶大家學習一下吧！

創建簡單的HTML5文件

HTML5文件名同樣后綴'.html'，我們在sublime中可以使用輸入英文嘆號（!）,然后按tab鍵就能創建一個簡單的HTML5文件：

一個簡單的html5文檔：

video 視頻

<video>標簽定義視頻。如下：

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

瀏覽器中顯示：

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

我們在IE7中打開看一下效果：

<video> 標簽的其他屬性

1.autoplay屬性

Autoplay屬性用于設置視頻是否自動播放，是一個布爾屬性。當出現時，表示自動播放，去掉是表示不自動播放。

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

2.loop屬性

loop屬性用于指定視頻是否循環播放，同樣是一個布爾屬性。

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

3.preload屬性

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

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

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

None：不進行預加載。使用此屬性值，可能是頁面制作者認為用戶不期望此視頻，或者減少HTTP請求。

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

Auto：全部預加載。

你必須非常努力，才能看起來毫不費力！

關注小白前端，持續收到文章推送！

文簡介

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

本文簡單講講如何使用 P5.js 播放視頻。

播放視頻文件

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

方式1：video元素播放視頻

基礎用法

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

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

src: 視頻路徑（必傳）。可以傳一個字符串類型的視頻路徑；也可以傳入字符串數組類型，指定多個路徑支持不同瀏覽器。
callback: 回調函數（非必傳）。在視頻加載完成時觸發。

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

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

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

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

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

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

粗略講講上面這段代碼。

preload() 是 p5.js 提供的一個生命周期，我們通常會將“加載靜態資源”這個步驟放在 preload() 里執行。在《p5.js光速入門》的圖片章節里介紹過。
setup() 是一個初始化的生命周期。
createVideo() 方法加載視頻。第二個參數傳入回調函數 afterLoad，在加載完視頻資源后會執行回調函數。
video.loop() 方法可以播放視頻。
video.pause() 方法可以暫停視頻。
noCanvas() 方法用來隱藏 <canvas> 元素，因為我們使用 createVideo() 會在頁面創建一個 <video> 元素，所以我們就不需要 <canvas> 元素了。

播放方法

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

傳入多個視頻地址

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

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

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

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

因為有些瀏覽器不一定支持你想播放的地址，此時就可以做個保底處理。

設置視頻窗口尺寸

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

let video=null

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

設置音量

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

let video=null

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

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

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

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

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

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() 創建出來的 <video> 元素隱藏起來，因為這次我們需要將視頻渲染到畫布中，所以不再需要 <video> 了。

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

其他地方沒變化。

接入攝像頭

如果你的設備有攝像頭，p5.js 是支持調用攝像頭并將內容展示在畫布上的。

let capture

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

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

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

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

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

整合營銷服務商