UnityWebGl--网页播放视频（使用AVPro和原生VideoPlayer）的坑和对视频的功能操作

最编程 2024-01-09 21:37:21

...

最近做个WebGL项目，里面有个播放视频的功能，Uinty上面测试没问题，发布后在网页运行播放视频就GG了。在这里记录一下。
关于部署IIS，这里有篇文章很详细https://www.cnblogs.com/W-Kr/p/5455862.html。

需要播放视频需要配置IIS的MIME添加如下

这个就是不能播放的大坑

先看Unity自带的视频播放功能，：

这里搞了个简单场景，对视频的操作有视频的播放和暂停，使用滑动条拖动视频进度，视频的当前播放时间和视频总时长

VideoPlayer组件结构如下

这里是使用的RenderTexture播放视频，Souce类型设置的VideoClip，就是直接把视频文件转化成VideoClip格式，拖入到里面，下面的视频的修改方式：

使用这种方法在Web播放提示没有解码器，一直没有解决。本地播放没有问题，为了能在Web播放我们改成URl模式

这里直接点击Browse选择对应文件，会自动复制URL。这样在Unity里面都打不开。我们去掉file://:

这样可以在Unity里面运行了，然后发布到Web后一直无法播放视频。

后来新建一个Html，只运行视频竟然播放成功，HTml：

<html lang="en-us">
<video src="./StreamingAssets/AVProVideoSamples/ZNCD.mp4" controls="controls"></video>
</html>

我的视频就是放在StreamingAssets对应的路径下。关键点来了，这里使用的是相对路径。我们在Unity使用的是绝对路径，于是修改Unity里面的URl:

,发布Web，运行，成功！

控制的代码都在这里：

这里需要注意，Source选择Url之前需要把对应的视频复制一份换成VideoClip格式，然后把Source换成VideoVClip模式，把视频放进去，这样才能通过代码获取对应视频时长

using UnityEngine;
using UnityEngine.Video;
using UnityEngine.UI;

public class VideoPlayerController : MonoBehaviour
{

    public VideoPlayer videoPlayer;
    public Text TotalTime;//视频时长
    public Text CurrentTime;//视频当前播放时间
    public GameObject PlayerBtn;//播放按钮
    public GameObject PauseBtn;//暂停按钮
    public Slider ProgressSlider;//滑动条
    private int totalH;//视频的总时长小时数
    private int totalM;//视频的总时长分钟数
    private int totalS;//视频的总时长秒数
    private int currentH;//视频播放的小时数
    private int currentM;//视频播放的分钟数
    private int currentS;//视频播放的秒数

    private void Start()
    {
        GetClipInfo();
    }

    private void Update()
    {
        GetCurrentInfo();
    }

    /// <summary>
    /// 获取视频的总时长信息。并赋值Text
    /// </summary>
    void GetClipInfo()
    {       
        totalH = (int)videoPlayer.clip.length / 3600;//小时计算
        totalM = (int)(videoPlayer.clip.length - totalH * 3600) / 60;//分钟计算
        totalS = (int)(videoPlayer.clip.length - totalH * 3600 - totalM * 60);//秒数计算
        TotalTime.text= string.Format("{0:D2}:{1:D2}:{2:D2} ", totalH, totalM, totalS); //转成时间格式显示            
    }

    /// <summary>
    /// 获取视频的播放时间。
    /// </summary>
    void GetCurrentInfo()
    {
        currentH = (int)videoPlayer.time / 3600;
        currentM = (int)(videoPlayer.time - currentH * 3600) / 60;
        currentS = (int)(videoPlayer.time - currentM * 3600 - currentM * 60);
        CurrentTime.text = string.Format("{0:D2}:{1:D2}:{2:D2}", currentH, currentM, currentS);

        ProgressSlider.value =(float)(videoPlayer.time / videoPlayer.clip.length);//滑动条显示进度
    }

    /// <summary>
    /// 滑动条拖动视频进度
    /// </summary>
    public void VideoProgressSliderDrag()
    {
        videoPlayer.Pause();//拖动时视频暂停
        videoPlayer.time = ProgressSlider.value * videoPlayer.clip.length;
    }
    /// <summary>
    /// 滑动条拖动完成
    /// </summary>
    public void VideoProgressSliderOverDrag()
    {
        videoPlayer.Play();
    }

    /// <summary>
    /// 播放按钮调用
    /// </summary>
    public void VideoPlay()
    {
        PlayerBtn.SetActive(false);
        PauseBtn.SetActive(true);
        videoPlayer.Play();
    }
    /// <summary>
    /// 暂停按钮调用
    /// </summary>
    public void VideoPause()
    {
        PlayerBtn.SetActive(true);
        PauseBtn.SetActive(false);
        videoPlayer.Pause();
    }    
}

下面就是AVPro的使用，这个只需要IIS里面的MIME配置好了，发布就可以直接使用：

这个使用的UGUI播放，选择对应路径。控制代码如下：

  /// <summary>
    /// 视频信息显示，包括时间，进度
    /// </summary>
    /// 
    private int totalHours;
    private int totalMinutes;
    private int totalSeconds;
    private int currentHours;
    private int currentMinutes;
    private int currentSeconds;

    public IEnumerator GetTotalTimer()
    {
        yield return new WaitForSeconds(0.1f);
        float totalTimer = mediaPlayer.Info.GetDurationMs() * 0.001f;
        totalHours = (int)totalTimer / 3600;
        totalMinutes = (int)(totalTimer - totalHours * 3600) / 60;
        totalSeconds = (int)(totalTimer - totalHours * 3600 - totalMinutes * 60);
        TotalTimer.text = string.Format("{0:D2}:{1:d2}:{2:D2}", totalHours, totalMinutes, totalSeconds);
    }
    public void MediaCurrentTimer()
    {
        float currentTimer = mediaPlayer.Control.GetCurrentTimeMs() * 0.001f;
        currentHours = (int)currentTimer / 3600;
        currentMinutes = (int)(currentTimer - currentHours * 3600) / 60;
        currentSeconds = (int)(currentTimer - currentHours * 3600 - currentMinutes * 60);
        CurrentTimer.text = string.Format("{0:D2}:{1:D2}:{2:D2}", currentHours, currentMinutes, currentSeconds);
        slider.value = (mediaPlayer.Control.GetCurrentTimeMs() * 0.001f) / (mediaPlayer.Info.GetDurationMs() * 0.001f);
    }
    /// <summary>
    /// 滑动条控拖动频播放进度
    /// </summary>
    public void MediaSliderDrag()
    {
        mediaPlayer.Control.Pause();
        mediaPlayer.Control.Seek(mediaPlayer.Info.GetDurationMs() * slider.value);
     
    }

主要就是使用mediaPlayer.Info和mediaPlayer.Control里面的方法和属性，其他没什么难度，就这样吧

欢迎加群：4364930讨论。

上一篇：分析ffmpeg4.2.2中av_register_all函数

下一篇： Kubectl