中文
resource-icon
Cocos Creator 3D特制 Video MeshRender 播放器 v1.0.7
类别
Creator扩展 插件
作者
肖_平
Creator版本要求
v3.4.0
支持平台
HTML5
评分
售价
¥ 166.21 (个人) ¥ 188.88
限时折扣 8.8折
距离结束还剩
0天 00 : 00 : 00

介绍

开发环境

  • 引擎版本:Cocos Creator 3.4.0 、3.5.2、3.6.0
  • 编程语言:Javascript + Typescript

引: 视频播放组件, 真的很难整, 此插件算是给大家提供一点思路吧

体验地址(说明)

因为囊中羞涩, 所以放在了免费的 GitHub 上面, 加载速度较慢(三分钟左右)

体验链接支持在微信端打开, 但是最好在浏览器或者电脑端打开

目前已测试平台

✅ Cocos Creator 3.4.0

✅ Cocos Creator 3.5.2

✅ Cocos Creator 3.6.0 (Debugging END)

技术介绍

  1. effect=>material=>视频纹理=>VideoTexture=>渲染到模型上
  2. 支持在 3D 环境下渲染播放视频 (Video.mp4) , 目前视频材质已启用 Instancing 合批
  1. 插件内所有的代码全部有注释, 不加密(目前比较简陋, 不建议商用, 仅供参考研究), 插件内并不包含演示用的那个 Demo
  1. 目前支持导入 5 个格式(菜单栏_基础模板) Sprite + Quad + Plane + Box + Sphere
  • 以下这八种都是可以用来渲染视频的
  • box, capsule, cone, cylinder, plane, quad, sphere, torus

仅需要自行拖拽一下即可, 示例在文末

大致效果

video_plugins_BugFix_0.png 视频渲染举例 7. 示例预览目前没有地方上传体验链接, 另, 本插件不包含此示例s.gif 新效果

痛点解决 (支持 3D 渲染视频)

  1. 自定义 mp4 视频渲染画面的刷新频率(防止过度刷新导致 Cocos 编辑器奔溃)

  2. 可在编辑内实时预览多个视频

  3. 可预览多个视频并开启声音

  4. 支持导入节点时, 自动绑定对应 MeshRenderer 的材质+网格+视频资源

  5. 导入时自动选中所使用的资源

  6. 解决多个视频导致的 Cocos 编辑器崩溃的问题

  7. 支持视频属性在 Cocos 编辑器的面板上, 进行可视化操作

    6.1 支持简单或者稍多视频属性自由切换

    6.2 支持视频节点 3D 自旋

    6.3 支持自动播放视频、循环播放、暂停播放、静音、滑条控制视频速度(最高十倍速)、设置视频音量等属性

    6.4 支持设置视频的宽高(不建议设置,目前自动适配设置为视频的帧的真实宽高)

    6.5 支持拖拽 mp4 资源绑定

    6.6 视频组件内的属性进行智能关联, 开启和关闭预览都有联动

    6.7 菜单栏添加视频组件有三种方式

    6.8 菜单栏支持多语言化显示

    6.9 视频组件属性和提示支持多语言化显示

7. 支持播放远程链接的 mp4 类的视频(不支持跨域的视频链接则无法播放)

目前已测试平台

Cocos Creator 编辑器内 H5 微信小游戏 Android原生 iOS原生 抖音小游戏 OPPO小游戏 vivo小游戏

目前仅测试过 H5 的平台, 其它平台暂未支持

使用方法(ps: 能上传的 gif 太小了,压缩后图片像素有些丢失了)

1.1 扫描并启用视频播放器插件

1. 扫描并启用视频播放器插件.gif

1.2 [bug 修复] Cocos 3.5.2 提示 addComponent: Failed to get class

如果第一次添加失败, 稍等一两秒, 再添加即可

addCompFail_0.gif addCompFail_1.gif

1.3 [简单展示] Cocos 3.6.0 预览

Cocos 3.6.0 已初步测试完毕, 效果如下, 支持编辑器预览功能查看, 远程视频请自行配置跨域规则(服务器端)

1.3.1 在 Cocos 3.6.0 内使用.gif 1.3.2 在 Cocos 3.6.0 内使用.gif 1.3.3 在 Cocos 3.6.0 内使用.gif

2.1 导入 Sprite 2D,Quad,Plane,Box,Sphere 的 3D 视频节点

2.1.1 导入2D图片节点(三种方式)

2.1.1 导入2D图片节点(三种方式)|593x499

2.1.2 查看-视频渲染到2D图片+查看DOM预览

2.1.2 查看-视频渲染到2D图片+查看DOM预览|690x416

2.1.3 切换视频-视频渲染到2D图片-本地(自动关联属性)

2.1.3 切换视频-视频渲染到2D图片-本地(自动关联属性)|690x416

2.1.4 切换远程视频-视频渲染到2D图片(自动关联属性)

2.1.4 切换远程视频-视频渲染到2D图片(自动关联属性)|690x416

2.1.5 调整远程视频的播放进度

2.1.5 调整远程视频的播放进度|690x487

2.2 导入 QuadPlaneBoxSphere 的 3D 视频节点

2.2 导入 QuadPlaneBoxSphere 的 3D 视频节点.gif

2.3.1 切换编辑机语言查看多语言样式(Ctrl+R 刷新界面)

2.3.1 切换编辑机语言查看多语言样式-1|593x499
2.3.2 切换编辑机语言查看多语言样式-2(Ctrl+R 刷新界面)|593x499
2.3.3 切换编辑机语言查看多语言样式-3(Ctrl+R 刷新界面)|593x499 2.3.4 切换编辑机语言查看多语言样式-3(Ctrl+R 刷新界面)|593x499

3. 双击节点, 查看刚刚新建的节点

3. 双击节点, 查看刚刚新建的节点.gif

4. 编辑器内查看 3D 节点自旋效果, Alt鼠标左键拖动场景或者用鼠标右键长按在场景编辑器内

4. 编辑器内查看 3D 节点自旋效果Alt鼠标左键拖动场景或者用鼠标右键长按在场景编辑器内.gif

5. 关闭节点自旋查看下

5. 关闭节点自旋查看下 GL_PlayVideo 的其它属性.gif

注: 下面的两个效果图, 因为 Cocos Store 无法上传超过 1M 的 GIF 图片, 所以压缩了两个版本的(一个 GIF 进行了极限压缩, 所以比较模糊, 另外一个高清的图到后面会有丢失像素)

6. 启用预览视频的功能不启用不播放视频, Alt鼠标左键拖动场景或者用鼠标右键长按在场景编辑器内

6. 启用预览视频的功能不启用不播放视频, Alt鼠标左键拖动场景或者用鼠标右键长按在场景编辑器内.gif 6. 启用预览视频的功能, 不启用不播放视频, Alt鼠标左键拖动场景或者用鼠标右键长按在场景编辑器内.gif

7. 示例预览目前没有地方上传体验链接, 另, 本插件不包含此示例

7. 示例预览目前没有地方上传体验链接, 另, 本插件不包含此示例s.gif 7. 示例预览目前没有地方上传体验链接, 另, 本插件不包含此示例.gif

补充说明

1. 属性检查器

1.1 视频纹理渲染主要是调用 videogl_effect 这个文件, 如需渲染到其它模型上, 需自定义这个 effect 的内容

image.png

1.2 导入视频模型目前仅有两个视频文件有声音(其它的两个去除了声音,因为包体过大了)

video_plane.mp4 和 video_sphere.mp4 的是有声音的

1.3 查看和使用更多的属性

默认采用简单模式(静音+不预览视频+可自行修改)

查看和使用更多的属性.gif

1.4 不建议频繁更改绑定的视频资源(比较难刷新)

1.5 在编辑器内查看不同的视频(操作)

就是先关闭预览视频, 再多点击其它的节点几次, 然后看到视频底图(那个灰底)后, 绑定其它的视频资源, 然后开启预览, 鼠标右键点击下场景编辑器里面 查看不同的视频1.gif 查看不同的视频2.gif

1.6 导入大视频 100M+ (加载成功前很卡,不建议加载)

举例

1.7 插件内那个 FBX 的那个就是 Cocos 的示例模型, 都支持渲染视频的

视频是支持播放声音的(在编辑器面板, 把简单属性那个地方选一选就是了) 以下这八种都是可以用来播放视频的 box, capsule, cone, cylinder, plane, quad, sphere, torus 喏, 就像这样

image.png 视频渲染举例

2. 顶部菜单/开发者/消息列表

1. 如果 Canfind class 'cc.VideoPlayer',请检查项目设置里面是否有开启视频功能
2. 如果运行后看不到 3D 模型和视频, 请检查 Camera 的设置和 Layers 的设置
3. 如需自定义 3D 模型, 请自行绑定 Mesh 和 Materials
4. 本地或者同域名下的视频资源, 建议在编辑器内编辑好后不要再更改, 如果需要切换, 请先关闭组件上的预览, 再选择其它无关节点, 再绑定新资源, 再开启预览
5. 目前编辑器内预览视频渲染效果, 请选中节点后, 按住 Alt 键, 再鼠标左键拖动视角, 或者按住鼠标右键拖动查看 3D 效果

image.png

本 GL_PlayVideo 插件的目录结构(内置一些个人思路)

└─cc-video-play-3_x(本插件主目录)
    │  hierarchy_menu.js 
    │  main.js
    │  package.json
    │  sceneJs.js
    │
    ├─i18n
    │      en.js
    │      zh.js
    │
    ├─other_editor_msgAPI
    │      compatibleApi.js
    │      editor2D.js
    │
    └─runtime_Ts
        │  before_ts_html_api_doc_ZIP.zip
        │  now_show_sourcesZIP.zip
        │
        ├─icon_res
        │      icon_box.png
        │      icon_plane.png
        │      icon_quad.png
        │      icon_sphere.png
        │      icon_sprite.png
        │
        └─now_show_sources
            │  api_doc.meta
            │  videoPlayRes.meta
            │  videoPlayTs.meta
            │
            ├─api_doc
            │      editor.d.ts
            │      editor.d.ts.meta
            │      fs.d.ts
            │      fs.d.ts.meta
            │      path.d.ts
            │      path.d.ts.meta
            │      wx.d.ts
            │      wx.d.ts.meta
            │
            ├─videoPlayRes
            │  │  effect_res.meta
            │  │  fbx_folder.meta
            │  │  material_res.meta
            │  │  video.splash.png
            │  │  video.splash.png.meta
            │  │  video_folder.meta
            │  │  video_prefabs.meta
            │  │
            │  ├─effect_res
            │  │      videogl_effect_3.4.0.zip
            │  │      videogl_effect_3.4.0.zip.meta
            │  │      video_effect_3.5.2.effect
            │  │      video_effect_3.5.2.effect.meta
            │  │
            │  ├─fbx_folder
            │  │      fbx_primitives.fbx
            │  │      fbx_primitives.fbx.meta
            │  │
            │  ├─material_res
            │  │      video_material_3.4.0.zip
            │  │      video_material_3.4.0.zip.meta
            │  │      video_material_3.5.2.mtl
            │  │      video_material_3.5.2.mtl.meta
            │  │
            │  ├─video_folder
            │  │      video_box.mp4
            │  │      video_box.mp4.meta
            │  │      video_plane.mp4
            │  │      video_plane.mp4.meta
            │  │      video_quad.mp4
            │  │      video_quad.mp4.meta
            │  │      video_sphere.mp4
            │  │      video_sphere.mp4.meta
            │  │
            │  └─video_prefabs
            │          BoxVideoNode.prefab
            │          BoxVideoNode.prefab.meta
            │          PlaneVideoNode.prefab
            │          PlaneVideoNode.prefab.meta
            │          QuadVideoNode.prefab
            │          QuadVideoNode.prefab.meta
            │          SphereVideoNode.prefab
            │          SphereVideoNode.prefab.meta
            │          SpriteVideoNode.prefab
            │          SpriteVideoNode.prefab.meta
            │
            └─videoPlayTs
                    GL_PlayVideo.ts
                    GL_PlayVideo.ts.meta

( playVideo 适配 3.x 版本 + 适配 3D 场景)

鸣谢

  • 感谢论坛各位大佬提供的思路
  • (大佬太多,此处不一一列举)

引用参考

  • 官方写在引擎里面的视频播放的思路

版权声明

  • 内部预览的视频文件采集至网络 (不建议商用)
  • 演示的 Demo 模型采集于 kenney.nl (免费)
  • 后续计划 (免费更新)
  • 看大家需求, 如果有需求就把演示的 Demo 更新上去(Demo 包体略大, 目前没上传)
  • 继续优化使用体验
  • 或增或减内容

补充说明

  • 目前展示的视频经过压缩, 所以看起来有点模糊
  • 目前的是Beta版本, 商用的话请大家酌情考虑
  • 暂未做过各种压测和Bug调测, 仅跑通效果
  • 后续功能完善后, 价格也会随之提高,感谢支持
  • 如果有发现bug, 请联系我, 我会尽快修复
  • 感谢各位的支持

购买须知

  • 请各位朋友看后仔细思考, 是否符合您的项目或者研究需求, 谨慎使用
  • 目前内容相对比较少, 后续才会迭代
  • 因为本产品为付费虚拟商品,一经购买成功概不退款,请在购买前, 谨慎确认是否购买内容

用户评分

平均评分
(5)
共有 1 位用户参与评分

评论

charleslai 2022-05-15 12:13

能否提供一下联系方式,或者是否有讨论群,我这边Editor内视频可以预览但是输出看不到视频

作者

非常感谢大佬的支持, 这边目前还没建立交流群, 麻烦您加下我的 QQ : 386437237, 我帮忙看下

  • 1

2020 © Cocos.com版权所有

增值电信业务经营许可证:闽B2-20160169

闽ICP备14002653号-6

闽公网安备 35020302033941号