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】差不多，这里就不再啰嗦了。

推荐阅读

《p5.js 光速入门》

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

《p5.js 变换操作》

《p5.js 3D图形-立方体》

《p5.js 开发点彩画派的绘画工具》

《p5.js画布操作实战：创建，绑定指定元素，动态调整大小，隐藏滚动条，删除画布》

点赞 + 关注 + 收藏=学会了

、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（视频）：在网页中播放视频的简单方法</title>
</head>
<body>
<h1>HTML5 Video（视频）：在网页中播放视频的简单方法</h1>
<p>下面是一个使用HTML5 Video标签在网页中播放视频的示例：</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>上述代码将呈现出一个带有控制条的视频播放器，并在其中播放指定的视频文件。视频文件可以是MP4格式（<code>.mp4</code>）或WebM格式（<code>.webm</code>）。</p>
<p>在上述代码中，我们使用了HTML5的Video标签来嵌入视频。通过设置<code>width</code>属性，我们可以指定视频播放器的宽度。通过设置<code>controls</code>属性，我们可以启用控制条，让用户可以控制视频的播放和暂停。</p>
<p>在<code>video</code>标签内部，我们使用了<code>source</code>标签来指定视频文件的URL和类型。在示例中，我们提供了两个不同格式的视频文件，以便在不同浏览器中兼容播放。</p>
<p>如果用户的浏览器不支持HTML5 Video标签或指定的视频文件格式，则会显示<code>Your browser does not support the video tag.</code>的提示信息。</p>
<p>通过使用HTML5 Video功能，我们可以在网页中方便地播放视频，为用户提供更加丰富和多样化的内容。视频可以应用于各种场景，如教育、娱乐、广告等。</p>
</body>
</html>

```

以上是一篇使用HTML5 Video标签在网页中播放视频的文章，其中包含了示例代码和一些相关说明。通过使用HTML5的Video标签，我们可以在网页中方便地嵌入和播放视频。在示例中，我们使用了两种不同格式的视频文件，以便在不同浏览器中兼容播放。通过设置Video标签的属性，如宽度和控制条，我们可以定制视频播放器的外观和功能。通过使用HTML5 Video功能，我们可以为用户提供更加丰富和多样化的内容，如教育、娱乐、广告等。请注意，在使用视频功能时，需要确保视频文件的合法性和版权问题。

我是永不低头的熊，喜欢美食、健身，当然也喜欢写代码，每天不定时更新各类编程相关的文章，希望你在码农这条路上不再孤单！

在线咨询

上一篇：在java开发和前端之间不知道选择哪个怎么办？
下一篇：JavaScript事件循环：同步任务和异步任务