p5.js 視頻播放指南

文簡介

在剛接觸 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】差不多，這里就不再啰嗦了。

其一是 @keyframes

因為它限定了CSS 樣式和動畫逐步從目前的樣式更改為新的樣式的變化過程。瀏覽器兼容的時候需要在keyframes上加前綴，-webkit-, -ms- 或 -moz- 。

keyframes中有兩個屬性，from和to，from里面的內容定義動畫開始的狀態，to記錄動畫結束的狀態。@keyframes后面緊跟的是動畫的名字，這個可以自定義取名字，比如我取 gifname，頁面某個標簽元素使用這個動畫時候，就需要用到這個名字。

@keyframes gifname
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

from和to也可以用百分比來表示動畫的過程，可以用百分比的話，就可以把動畫的內容定義得更加豐富了。

@keyframes gifname
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

比如我在一個div元素上用到這個動畫

div
{
    animation: gifname 5s;
    -webkit-animation: gifname 5s; /* Safari 與 Chrome */
}

其二是 animation

剛剛我們在div元素中看到的animation就是我們要認識的第二個屬性。animation其實是一堆屬性的簡寫。比如看下面一句代碼：

 animation:gifname 2s step-start 1s infinite alternate;

這一句其實可以寫成

    animation-name: gifname;
    animation-duration: 2s;
    animation-timing-function: step-start;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

animation-name：動畫名稱

這里是引入 @keyframes 動畫的名稱。

animation-duration：動畫的持續時間

單位可以是秒(s)，也可以是毫秒(ms)

animation-timing-function：動畫的過度類型

屬性值 :默認是 "ease"

linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

ease：平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

cubic-bezier(n,n,n,n):在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。

step-start:馬上跳到動畫每一結束幀的狀態

animation-delay：動畫延遲時間

默認是 0。

animation-iteration-count：動畫循環次數

默認是 1。屬性值infinite 代表無數次。

animation-direction：動畫是否在下一周期逆向地播放

屬性值

normal：正常方向

reverse：反方向運行

alternate：動畫先正常運行再反方向運行，并持續交替運行

alternate-reverse：動畫先反運行再正方向運行，并持續交替運行

另外還有兩項屬性：

animation-fill-mode:設置動畫播放后的效果

取值:

none:初始樣式,不改變默認行為.(默認行為)

forwards:動畫播放結束后保持最后一個狀態;

backwards:結束后保持第一個狀態;

animation-play-state :檢索或設置對象動畫的狀態

屬性值

animation-play-state:running | paused;

running:運動

paused: 暫停

animation-play-state:paused; 當鼠標經過時動畫停止，鼠標移開動畫繼續執行

到此為止，屬性我們都學習完了，開始實踐部分：

首先準備好我們需要的圖片，這里我使用了九張圖片。

我把九張圖片放在九個<li></li>標簽里。所有li標簽用ul標簽包含起來。然后把ul放在一個div標簽里，div設置成一張圖片的大小，然后通過逐幀移動ul元素實現動畫。

最后的處理，把超出div元素的部分隱藏即可。然后就得到了文章開始時候的圖片了。

最關鍵的，上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css動畫</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        margin-right: 0;
    }
#div{
    width:100px;
	height:100px;
    border: 1px solid #fff;
    overflow: hidden;
	margin: 100px 0 0 100px;
    }
    #box{
     width:900px;
     height:100px;   
    border: 1px solid #fff;
    overflow:visible;
    position:relative;
    animation:myfirst 2s step-start 1s infinite ;
    /* Firefox: */
	-moz-animation:myfirst 2s step-start 1s infinite ;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 2s step-start 1s infinite ;
	/* Opera: */
	-o-animation:myfirst 2s step-start 1s infinite ;
    }
    #box li{
        float: left;
        width:98px;
        height:100px; 
        border:1px solid #fff;
    }
    li img{
        width:100%;
        height:100%;
    }
    @keyframes myfirst
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
    55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}
@-moz-keyframes myfirst /* Firefox */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
   100% {left:0px; top:0;}
}

    </style>
</head>
<body>
    <div id="div">
        <ul id="box">
            <li><img src="./img/o1.jpg"/></li>
            <li><img src="./img/o2.jpg"/></li>
            <li><img src="./img/o3.jpg"/></li>
            <li><img src="./img/o4.jpg"/></li>
            <li><img src="./img/o5.jpg"/></li>
            <li><img src="./img/o6.jpg"/></li>
            <li><img src="./img/o7.jpg"/></li>
            <li><img src="./img/o8.jpg"/></li>
            <li><img src="./img/o9.jpg"/></li>
        </ul>
    </div>
</body>
</html>

最后嘮叨一句，該動畫不支持IE9及更早版本的IE瀏覽器。

喜歡的話，就點贊支持一下吧！

、變形

CSS3變形是一些效果的集合

如平移、旋轉、縮放、傾斜效果

每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化

語法：transform:[transform-function] *;

變形函數

translate()：平移函數，基于X、Y坐標重新定位元素的位置

transform:translate(100px,0) x軸移動

transform:translate(0,100px) y軸移動

scale()：縮放函數，可以使任意元素對象尺寸發生變化

transform:scale(2,0) 設置X軸的縮放

transform:scale(0,2) 設置Y軸的縮放

rotate()：旋轉函數，取值是一個度數值

transform:rotate(30deg);

skew()：傾斜函數，取值是一個度數值

transform:skewX（ax）：表示只設置X軸的傾斜

transform:skewY（ay）：表示只設置Y軸的傾斜

注：rotate( )函數只是旋轉，而不會改變元素的形狀

skew( )函數是傾斜，元素不會旋轉，會改變元素的形狀

二、過度

transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現、漸弱、動畫快慢等

CSS3 transition的過渡功能更像是一種“黃油”，通過一些CSS的簡單動作觸發樣式平滑過渡

語法：transition:[transition-property transition-duration transition-timing-function transition-delay ]

過渡屬性（ transition-property ）

定義轉換動畫的CSS屬性名稱

IDENT：指定的CSS屬性（width、height、background-color屬性等）

all：指定所有元素支持transition-property屬性的樣式，一般為了方便都會使用all

過渡所需的時間（ transition-duration ）

定義轉換動畫的時間長度，即從設置舊屬性到換新屬性所花費的時間，單位為秒（s）

過渡動畫函數（ transition-timing-function ）

指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡添加一個函數來指定動畫的快慢方式

ease：速度由快到慢（默認值）

linear：速度恒速（勻速運動）

ease-in：速度越來越快（漸顯效果）

ease-out：速度越來越慢（漸隱效果）

ease-in-out：速度先加速再減速（漸顯漸隱效果）

過渡延遲時間（ transition-delay ）

指定一個動畫開始執行的時間，當改變元素屬性值后多長時間去執行過渡效果

正值：元素過渡效果不會立即觸發，當過了設置的時間值后才會被觸發

負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷

0：默認值，元素過渡效果立即執行

三、animation動畫簡介

animation實現動畫主要由兩個部分組成

通過類似Flash動畫的關鍵幀來聲明一個動畫

在animation屬性中調用關鍵幀聲明的動畫實現一個更為復雜的動畫效果

設置關鍵貞：

@keyframes spread {

0% {width:0;}

33% {width:23px;}

66% {width:46px;}

100% {width:69px;}

}

調用關鍵貞：

animation:animation-name animation–duration animation-timing-function

animation-delay animation-iteration-count animation-direction

animation-play-state animation-fill-mode;

動畫的使用過程：

動畫的播放次數（animation-iteration-count）

值通常為整數，默認值為1

特殊值infinite，表示動畫無限次播放

動畫的播放方向（animation-direction）

normal，動畫每次都是循環向前播放

alternate，動畫播放為偶數次則向前播放

動畫的播放狀態（animation-play-state）

running將暫停的動畫重新播放

paused將正在播放的元素動畫停下來

代碼展示：

<html>

<head>

</head>

<body>

</div>

</body>

</html>

margin: 0;

padding: 0;

}

/* 父div設置寬高 */

.box{

width: 80%;

height: 600px;

margin: 0px auto;

margin-top: 10px;

position: relative;

}

/* 所有的圖片設置 */

.box>img{

width: 300px;

height: 250px;

position: absolute;

border: 1px solid white;

box-shadow:5px 5px 5px rgba(0,0,0,.6);

border-radius: 20px;

}

/* 第一張圖片設置 */

.box>img:nth-of-type(1) {

right: 2;

top: 0px;

transform: rotate(48deg);

}

.box>img:nth-of-type(2){

left: 2px;

top: 10px;

transform: rotate(319deg);

}

.box>img:nth-of-type(3){

left: 500px;

top: 40px;

transform: rotate(278deg);

}

.box>img:nth-of-type(4){

left:250px;

top:40px;

transform: rotate(-50deg);

}

.box>img:nth-of-type(5){

top:300px;

transform: rotate(-80deg);

}

.box>img:nth-of-type(6){

left:700px;

top:300px;

transform: rotate(-260deg);

}

.box>img:nth-of-type(7){

left: 310px;

top: 300px;

transform: rotate(94deg);

}

.box>img:nth-of-type(8){

left: 460px;

top: 300px;

transform: rotate(205deg);

}

.box>img:nth-of-type(9){

left: 100px;

top: 210px;

transform: rotate(38deg);

}

.box>img:nth-of-type(10){

right:100px;

top:300px;

transform: rotate(-210deg);

}

.box>img:hover{

/* 圖片前置 */

z-index: 1;

/* 還原放大1.5倍 */

transform: rotate(360deg) scale(2);

transition:all 1s ease-in-out;

}

<!DOCTYPE html>

<head>

<title>QQ彩貝導航條</title>

</head>

<body>

<nav>

<h1>

</a>

</h1>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</section>

</nav>

</div>

</body>

</html>

margin: 0;

padding:0;

}

li{

list-style: none;

}

text-decoration: none;

color: #787690;

}

/* 整個導航 */

nav{

height: 100px;

width: 100%;

margin: 0 auto;

position: relative;

background: linear-gradient(to bottom, #FFFFFF, rgba(204, 204, 204, 0.4));

}

/* 導航Logo部分 */

.topleft{

padding-top: 30px;

padding-left: 110px;

}

/* 中間整體部分 */

.topMiddle{

position: absolute;

left: 400px;

bottom: 20px;

height: 50px;

}

/* 導航中間文字 */

.topMiddle>ul>li{

float: left;

margin-right: 20px;

padding-top: 20px;

}

.topMiddle>ul>li>a:hover{

color:yellow;

}

/* 導航中間文字部分第一個li */

.iconOne{

display: inline-block;

position: absolute;

width: 46px;

height: 100px;

left: 0;

top:0;

background: url('../htmlNine/img/header_03.png') 2px 1px no-repeat;

}/* 導航中間文字部分第三個li */

.iconTwo{

display: inline-block;

position: absolute;

width: 46px;

height: 100px;

top:0;

background: url('../htmlNine/img/header_07.png') 2px 1px no-repeat;

}

/* 調用關鍵貞 */

.topMiddle>ul>li:nth-child(1)>a:hover .iconOne{

background: url('../htmlNine/img/header_05.png') 2px 1px no-repeat;

animation: identifier 1s ease-out both;

}

/* 調用關鍵貞 */

.topMiddle>ul>li:nth-child(3)>a:hover .iconTwo{

background: url('../htmlNine/img/header_09.png') 2px 1px no-repeat;

animation: identifier 1s ease-out both;

}

/* topRight */

/* 登錄部分所有li */

.topRight{

position: absolute;

left: 1380px;

bottom: 55px;

height: 40px;

}

.topRight>ul>li{

height: 25px;

width: 30px;

}

/* 登錄部分三個圖標 */

.topRight>ul>li:nth-child(1){

position: absolute;

right: 100px;

top:45px;

background: url('../htmlNine/img/iconsB_13.png') 2px 1px no-repeat;

}

.topRight>ul>li:nth-child(2){

position: absolute;

right: 150px;

top:45px;

background: url('../htmlNine/img/iconsB_12.gif') 2px 1px no-repeat;

}

.topRight>ul>li:nth-child(3){

position: absolute;

right:200px;

top:45px;

background: url('../htmlNine/img/iconsB_11.gif') 2px 1px no-repeat;

}

.topRight>ul>li:hover{

/* 變形 */

transform: rotate(720deg) scale(2);

/* 過度 */

transition:all 0.6s ease-in-out ;

}

/* 動畫設置關鍵幀名稱identifier */

@keyframes identifier {

0%{width: 0;}

33%{width:23px;}

66%{width: 46px;}

100%{width: 69px;}

}

效果鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/duocaiqiang.html

file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/QQcaibeidaohang.html

在線咨詢

上一篇：產品經理的技術腦：html是什么意思？
下一篇：HTML5 Video(視頻)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

p5.js 視頻播放指南

文簡介

播放視頻文件

方式1：video元素播放視頻

基礎用法

播放方法

傳入多個視頻地址

設置視頻窗口尺寸

設置音量

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

接入攝像頭

推薦閱讀

其一是 @keyframes

其二是 animation

您的項目需求