Untiy的Webgl端网页端视频播放,又不想直接mp4格式等格式的。

针对Untiy的Webgl端网页端视频播放,又不想直接mp4格式等格式的一些小技巧方式。

1.安装AVPro Video插件。

2.场景ui布局类似如下图:

3.UI中新建image,改名VideoDisplay,把image组件删除,添加Displayugui组件,关联mediaplayer。

4.UI中新建gameobject,添加mediapalyer组件,并关联你要播放的某个视频。

5.新建gameobject,添加HTML5VideoPlayer组件,并设置如下,videofilename的名称就是你的视频名称,视频位置webgl网页端主要是放在StreamingAssets中,视频的后缀名可以改为我这个名称。然后你同步设置也要同名称。

6.这个组件可以播放多个视频,你只要有多个panel拷贝下就行了。

相关的HTML5VideoPlayer代码如下:

csharp 复制代码
using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;
using System.Collections;
using RenderHeads.Media.AVProVideo;

[System.Serializable]
public class VideoGroup
{
    public UnityEngine.UI.Button playButton;
    public UnityEngine.UI.Button pauseButton;
    public UnityEngine.UI.Button stopButton;
    public DisplayUGUI displayUGUI;
    public MediaPlayer mediaPlayer;  
    public string videoFileName = "11.longyugxq";
    
    [HideInInspector] public bool isLoaded = false;
}

public class HTML5VideoPlayer : MonoBehaviour
{
    [SerializeField] private List<VideoGroup> videoGroups = new List<VideoGroup>();

    private void Start()
    {
        StartCoroutine(InitializeAsync());
    }

    private IEnumerator InitializeAsync()
    {
        for (int i = 0; i < videoGroups.Count; i++)
        {
            yield return InitializeVideoGroupAsync(videoGroups[i], i);
        }
    }

    private IEnumerator InitializeVideoGroupAsync(VideoGroup group, int groupIndex)
    {
        // 检查MediaPlayer是否已在Inspector中设置
        if (group.mediaPlayer == null)
        {
            Debug.LogError($"VideoGroup {groupIndex} 未配置 MediaPlayer");
            yield break;
        }

        // 打开视频文件
        bool opened = group.mediaPlayer.OpenMedia(
            new MediaPath(group.videoFileName, MediaPathType.RelativeToStreamingAssetsFolder),
            autoPlay: false
        );

        if (!opened)
        {
            Debug.LogError($"打开视频失败: {group.videoFileName}");
            yield break;
        }

        // 等待加载完成
        yield return new WaitForSeconds(0.01f);

        Debug.Log($"VideoGroup {groupIndex} - {group.videoFileName} 加载完成");

        // 绑定按钮事件
        if (group.playButton != null)
            group.playButton.onClick.AddListener(() => PlayVideo(groupIndex));
        if (group.pauseButton != null)
            group.pauseButton.onClick.AddListener(() => PauseVideo(groupIndex));
        if (group.stopButton != null)
            group.stopButton.onClick.AddListener(() => StopVideo(groupIndex));

        group.isLoaded = true;
    }

    public void PlayVideo(int groupIndex)
    {
        if (groupIndex >= 0 && groupIndex < videoGroups.Count && videoGroups[groupIndex].isLoaded && videoGroups[groupIndex].mediaPlayer != null)
        {
            videoGroups[groupIndex].mediaPlayer.Play();
        }
    }

    public void PauseVideo(int groupIndex)
    {
        if (groupIndex >= 0 && groupIndex < videoGroups.Count && videoGroups[groupIndex].mediaPlayer != null)
        {
            videoGroups[groupIndex].mediaPlayer.Pause();
        }
    }

    public void StopVideo(int groupIndex)
    {
        if (groupIndex >= 0 && groupIndex < videoGroups.Count && videoGroups[groupIndex].mediaPlayer != null)
        {
            MediaPlayer mediaPlayer = videoGroups[groupIndex].mediaPlayer;
            mediaPlayer.Stop();
            mediaPlayer.Control.Seek(0.0);
        }
    }
}
相关推荐
xcLeigh19 小时前
Unity基础:GameObject与Component——Unity核心架构思想彻底理解
unity·教程·component·gameobject
蝉蜕日记19 小时前
视频压缩 v1.1.31:高效压缩,无损画质,释放存储空间
音视频·生活·视频编解码·视频·软件需求
lumengabc21 小时前
视频制作流程MP4旁白语音生成裁剪视频压缩python处理ppt转视频M4a格式
音视频
音视频牛哥1 天前
AI浪潮下,实时音视频SDK正在经历怎样的价值重构?
人工智能·音视频·实时音视频·rtmp推流·低延迟rtsp播放器·低延迟rtmp播放器·rtsp转rtmp推流
郝学胜-神的一滴1 天前
中级OpenGL教程 022:探秘三维世界的血脉传承——物体父子关系与矩阵递归奥义
c++·线性代数·unity·矩阵·游戏引擎·unreal engine·opengl
乐橙开放平台1 天前
明厨亮灶笔记:乐橙轻应用 H5 + 小程序插件,一套 BFF 出两张播放凭证
人工智能·笔记·物联网·小程序·音视频·notepad++
ofoxcoding1 天前
Seedance 2.0 与 Wan 2026 视频生成 API 成本效率深度对比分析
网络·人工智能·ai·音视频
xingyuzhisuan1 天前
星宇智算 AI 视频生成工具九维度全测评与行业对标分析
人工智能·音视频
豌豆学姐1 天前
likeadmin-api 视频生成工作流实战:Seedance 2.0 接口从素材到任务查询
aigc·音视频·api·视频生成·likeadmin-api
乐橙开放平台1 天前
养殖 SaaS 笔记:乐橙 IoT 物模型管环境,视频 OpenAPI 管回看
数据库·笔记·物联网·mysql·音视频