【C# 功能总结 18】 C# 利用video.js 播放视频

路飞VS草帽

已于 2025-04-09 10:05:25 修改

阅读量410

点赞数 3

CC 4.0 BY-SA版权

分类专栏： 39天精通C#从入门到就业文章标签： C# video.js 播放视频

于 2024-12-27 15:23:01 首次发布

本文链接：https://blog.youkuaiyun.com/u010117029/article/details/144770252

39天精通C#从入门到就业专栏收录该内容

49 篇文章

订阅专栏

在C#中，直接操作前端的视频播放器（如video.js）通常需要通过HTML、CSS和JavaScript来实现。C#主要用于后端逻辑处理，而前端的视频播放功能则需要借助前端技术。下面是一个简单的示例，展示如何在HTML页面中使用video.js来播放不同类型的视频，并实现全屏、进度条、倍速等功能。

1. 引入video.js库

首先，你需要在HTML文件中引入video.js的CSS和JavaScript文件。你可以通过CDN引入，也可以下载到本地引入。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video.js Player</title>
    <!-- 引入video.js CSS -->
    <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
</head>
<body>
    <video
        id="my-video"
        class="video-js vjs-default-skin"
        controls
        preload="auto"
        width="640"
        height="264"
        data-setup='{}'>
        <source src="your_video_file.mp4" type="video/mp4" />
        <source src="your_video_file.webm" type="video/webm" />
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>

    <!-- 引入video.js JavaScript -->
    <script src="https://vjs.zencdn.net/7.14.3/video.js"></script>
</body>
</html>

2. 配置video.js

video.js默认支持全屏、进度条、倍速等功能。你可以在data-setup属性中进行一些基本配置，或者通过JavaScript进行更复杂的配置。

基本配置

html

<video
    id="my-video"
    class="video-js vjs-default-skin"
    controls
    preload="auto"
    width="640"
    height="264"
    data-setup='{"playbackRates": [0.5, 1, 1.5, 2]}'><!-- 设置倍速选项 -->
    <source src="your_video_file.mp4" type="video/mp4" />
    <source src="your_video_file.webm" type="video/webm" />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

通过JavaScript配置

html

<script>
    var player = videojs('my-video', {
        playbackRates: [0.5, 1, 1.5, 2], // 设置倍速选项
        controlBar: {
            playbackRateMenuButton: true, // 显示倍速菜单
            fullscreenToggle: true, // 显示全屏按钮
            progressControl: true // 显示进度条
        }
    });
</script>

3. 处理不同类型的视频

video.js支持多种视频格式，如MP4、WebM等。你可以在<source>标签中指定不同的视频文件和类型。

html

<video
    id="my-video"
    class="video-js vjs-default-skin"
    controls
    preload="auto"
    width="640"
    height="264"
    data-setup='{}'>
    <source src="your_video_file.mp4" type="video/mp4" />
    <source src="your_video_file.webm" type="video/webm" />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

4. 从C#后端提供视频文件

如果你需要从C#后端提供视频文件，可以通过ASP.NET Core或其他Web框架来实现。以下是一个简单的示例，展示如何在ASP.NET Core中提供视频文件。

创建一个ASP.NET Core项目

创建一个新的ASP.NET Core Web应用程序。
将视频文件放在wwwroot/videos文件夹中。

提供视频文件的控制器

csharp

using Microsoft.AspNetCore.Mvc;
using System.IO;

namespace VideoPlayer.Controllers
{
    public class VideoController : Controller
    {
        public IActionResult GetVideo(string fileName)
        {
            var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "videos", fileName);
            var memory = new MemoryStream();
            using (var stream = new FileStream(path, FileMode.Open))
            {
                stream.CopyTo(memory);
            }
            memory.Position = 0;
            return File(memory, "video/mp4");
        }
    }
}

更新HTML以使用后端提供的视频文件

html

<video
    id="my-video"
    class="video-js vjs-default-skin"
    controls
    preload="auto"
    width="640"
    height="264"
    data-setup='{}'>
    <source src="/video/GetVideo?fileName=your_video_file.mp4" type="video/mp4" />
    <source src="/video/GetVideo?fileName=your_video_file.webm" type="video/webm" />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

通过以上步骤，你可以在HTML页面中使用video.js播放不同类型的视频，并实现全屏、进度条、倍速等功能。前端的配置和后端的视频文件提供是分开的，前端主要负责播放逻辑，后端负责提供视频文件。