Unity3DWEBGL播放本地视频用(VideoPlayer)

👉前言

大家好,本篇记录一下webgl播放视频,用的是videoPlayer组件, 不定时更新unity开发技巧,觉得有用记得一键三连哦。

接下来就一步步实现吧

👉一、效果的视频演示

unity播放本地视频

👉1-1 新建Video组件

在Hierarchy面板右键创建VideoPlayer组件

👉1-2 创建特殊文件夹StreamingAssets放入视频

👉1-3 新建RawImage

在这里插入图片描述

👉1-4 新建RenderTexture

在这里插入图片描述

👉1-5 把RenderTexture拖到RawImage里面

在这里插入图片描述

👉1-6 在把RenderTexture拖到VideoPlayer里面

在这里插入图片描述

到此UI就设置完成了 注意: 1.设置宽高，这个最好与视频的宽高匹配，或者同比例缩放 2.Texture需要跟VideoPlayer组件中Target Texture对象一致

👉二、编辑代码

新建脚本VideoPlayerUrl.cs,编辑代码

👉2-1 代码如下

（示例）

using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine;
using UnityEngine.Video;
public class VideoPlayerUrl : MonoBehaviour
{
    public VideoPlayer videoPlayer;

    void Start()
    {
        string path = Path.Combine(Application.streamingAssetsPath, "123456.mp4");
        Debug.Log(path);
        videoPlayer.url = path;
        videoPlayer.Play();
    }
}

👉2-2 注意事项

（1）注意路径，需要把视频放到StreamingAssets文件夹内，设置好自己视频的路径 （2）使用了Path.Combine来拼接两个路径，关于这个API还有更多应用就不累述 （3）错误路径写法：“file://” + Application.streamingAssetsPath + “/123456.mp4”

👉2-3 上面的路径根据打包的不同路径也不同

反正webgl是必须要用Path.Combine ,PC不需要直接 Application.streamingAssetsPath就可以 Android和ios好像也不一样,具体的百度一下就行了,

👉2-4 打包运行

unity播放本地视频

👉三、添加一下视频播放结束的API

1.不需要判断视频的长度什么的

👉3-1、 videoPlayer.loopPointReached就可以判断了

👉3-2、代码实现

在这里插入图片描述

在这里插入图片描述

增加功能 : 解决播放视频总是闪上一个视频的画面问题 、问题原因： 主要因为用RenderTexture取渲染播放的，当视频播放完成之后，会在将最后一帧的画面定格在RenderTexture上 2、解决办法： 在播放之前或者播放完之后，释放RenderTexture上的资源,调用方法。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Video;

public class BoFangVideo : MonoBehaviour
{
    public VideoPlayer videoPlayer;
    public RenderTexture renderTexture;
    // Start is called before the first frame update
    void Start()
    {
        //解决播放视频总是闪上一个视频的画面问题清除渲染缓存
        renderTexture.Release();
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

补充：

👉 实现原理

1. WebGL环境限制 安全沙箱：WebGL运行在浏览器沙箱中，无法直接访问用户本地文件系统。 文件上传机制：必须通过浏览器提供的文件上传接口（如 ）让用户主动选择本地文件。
2. 视频播放流程 用户上传文件：通过HTML的元素触发文件选择对话框。 文件转临时URL：使用URL.createObjectURL()将用户选择的文件转为浏览器可访问的临时URL。 Unity接收URL：通过Unity WebGL JavaScript API将临时URL传递给Unity脚本。 VideoPlayer加载视频：Unity的VideoPlayer组件通过URL加载并播放视频。
3. VideoPlayer组件 在WebGL平台中，VideoPlayer依赖浏览器的HTML5 标签实现播放。 支持的视频格式：取决于浏览器，通常为H.264（MP4）和WebM（VP8/VP9）。

👉注意事项

1. 视频格式兼容性 推荐格式：使用H.264编码的MP4文件（.mp4）。 避免格式：AVI、MOV等格式可能不被浏览器支持。 测试工具：通过Can I Use查询浏览器支持情况。
2. 跨域问题（CORS） 本地文件：直接上传本地文件无CORS问题。 远程服务器文件：若从服务器加载视频，需配置CORS响应头（如Access-Control-Allow-Origin: *）。
3. 内存与性能 大文件处理：避免加载超大视频（>100MB），可能导致浏览器内存溢出。 释放临时URL：播放结束后调用URL.revokeObjectURL(url)释放内存。
4. 用户交互限制 自动播放策略：大多数浏览器要求视频播放必须由用户手势（如点击按钮）触发。 移动端适配：部分移动浏览器可能限制自动播放或全屏播放。
5. Audio轨道问题 静音播放：某些浏览器（如Chrome）要求视频初始化为静音才能自动播放。

videoPlayer.SetDirectAudioMute(0, true); // 静音

1. 代码安全 输入验证：检查文件类型和大小，防止用户上传非视频文件。

// HTML侧限制文件类型
<input type="file" accept="video/mp4, video/webm">

1. 浏览器差异 测试主流浏览器：Chrome、Firefox、Safari对视频播放的支持可能不同。 Fallback方案：提供错误提示，如监听VideoPlayer的errorReceived事件。

👉总结

如果觉得本篇文章有用别忘了点个关注，关注不迷路，持续分享更多Unity干货文章。 你的点赞就是对博主的支持，有问题记得留言评论或私聊哦 博客将会介绍Unity3DWEBGL播放本地视频用(VideoPlayer)。 希望这篇博客对Unity的开发者有所帮助。 大家好，我是心疼你的一切，不定时更新Unity开发技巧，觉得有用记得一键三连哦。 欢迎点赞评论哦.下面就让我们进入正文吧 !