p5.js 视频播放指南

这篇具有很好参考价值的文章主要介绍了p5.js 视频播放指南。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文简介

在刚接触 p5.js 时我以为这只是一个艺术方向的 canvas 库,没想到它还支持视频文件和视频流的播放。

本文简单讲讲如何使用 P5.js 播放视频。



播放视频文件

p5.js 除了可以使用 video 元素播放视频外,还支持使用 image 控件播放视频。


方式1:video元素播放视频

基础用法

p5.jscreateVideo() 方法可以创建一个 <video> 元素。

createVideo(src, [callback]) 可以传入2个参数:

  • src: 视频路径(必传)。可以传一个字符串类型的视频路径;也可以传入字符串数组类型,指定多个路径支持不同浏览器。
  • callback: 回调函数(非必传)。在视频加载完成时触发。

p5.js 视频播放指南,前端

录制 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 是支持调用摄像头并将内容展示在画布上的。

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.jsimage 控件里。

这个默认是显示的,而且它是一个独立的元素,默认和画布分离。所以使用 capture.hide() 方法把 <video> 元素隐藏起来,不然页面中会出现两个视频窗口。


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



推荐阅读

👍《p5.js 光速入门》

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

👍《p5.js 变换操作》

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

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

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


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

代码仓库文章来源地址https://www.toymoban.com/news/detail-718972.html

到了这里,关于p5.js 视频播放指南的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+萤石云ezuikit.js播放直播流视频(声音自动关闭,添加控件,多个视频播放)

    vue+萤石云ezuikit.js播放直播流视频(声音自动关闭,添加控件,多个视频播放) 实例使用 引入最新的ezuikit.js 看过官网的文档都知道萤石云的文档是多么的‘善解人意’哈,懂得都懂,很多东西没有说清楚的,只能靠自己去摸索或者看他们的demo来一点点测试实现 官网地址:

    2024年02月04日
    浏览(127)
  • vue+flv.js实现视频播放

    代码如下(示例): npm install --save flv.js  下载flv依赖 1.获取视频流地址并使用 2.有一个问题就是同时只能播放6个视频,超出6个视频会加载不出来,需要摧毁上一个视频,关闭视频的时候调用这个方法就好 3.还有一个就是,flv视频在谷歌浏览器播放,如果你离开页面他会暂

    2024年02月14日
    浏览(36)
  • 原生js实现简单的视频播放控件

    HTML 5 视频/音频参考手册 https://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp 本文主要依靠HTML 5 api ,所有用的HTML 5 api 的使用和各项信息请参考以上链接! 如果你打算参考本文,这里所用的视频什么的请自行准备。这里仅建议初学者参考。 因为主要依靠HTML 5的api,所有也没什么

    2024年02月02日
    浏览(46)
  • Unity中使用AVPro Video播放视频的完全指南

    Unity AVPro是一款强大的视频播放解决方案,它支持多种视频格式和编解码器,能够在Unity中实现高质量的视频播放。本教程将指导你如何在Unity项目中使用AVPro播放视频。 1、安装AVPro Video 2、在UI上显示视频 3、在3D物体上显示视频,介绍两种播放到物体的方法 4、编写脚本,用按

    2024年04月16日
    浏览(73)
  • webrtc视频播放器(ZLMRTCClient.js)

    在播放实时视频时,视频播放器一般会有延迟,此时,就可以使用webrtc来拉流,延迟在1s或者基本没有延迟。与zlm配套的rtc js客户端.(国标) ZLMRTCClient.js: 与zlm配套的rtc js客户端 ZLMRTCClient.js: 与zlm配套的rtc js客户端 https://gitee.com/xiongguangjie/zlmrtcclient.js 按照 下图执行命令行,则自

    2024年02月11日
    浏览(48)
  • JS控制视频播放、暂停、倍速、音量等功能

    HTML  CSS: JS:(暂时没做优化什么的)

    2024年02月11日
    浏览(50)
  • 纯前端播放文件流视频并预览并截取视频第一帧

    1、把文件流转为本地可以播放地址 调用 getFileURL 并传入文件流会返回一个地址,将地址赋值给 video 的 src 即可播放视频,无需上传至服务器。 2、截取视频第一帧 调用 getVideoBase64 并将第一步得到的url转给 getVideoBase64 即可得到视频第一帧图片, getVideoBase64 返回的片为 base64

    2023年04月09日
    浏览(38)
  • vue项目中使用EasyPlayer.js播放视频

    项目中最近需要接摄像头的监控画面,一开始用了市面上一些别的插件,发现有些视频能播放,有些不能播放,最后发现是摄像头码流的问题,很多插件都无法支持h265的编码格式。但是现在市面上稍微新点的摄像头,都是h265的编码格式。 一、插件下载 npm install copy-webpack-

    2024年02月12日
    浏览(40)
  • 视频知识点(17)- flv.js 实现播放本地视频文件的技巧

    目录 问题 解决 一、启动 HTTP 静态服务 二、播放 URL 三、允许静态服务跨域

    2023年04月08日
    浏览(34)
  • 浏览器自动播放音视频-前端实现方案

    目录 前言 浏览器自动播放策略 策略详情: 实现方案  方案1: 互动后播放 方案2: 互动后出声 总结 在开发中可能有遇到这样的需求,当用户打开页面后,需要自动播放视频或音频,按理说那就打开页面时play()一下不就搞定了吗,但实际情况很明显不是,不然也没得这篇文

    2024年02月04日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包