Video.js 是一个具有大量功能的流行的视频和音频 JavaScript 库,今天我们试试集成到 Blazor .

Blazor VideoPlayer 视频播放器 组件

示例

https://blazor.app1.es/videoPlayers

1. 新建工程b13video

dotnet new blazorserver -o b13video

2. 将项目添加到解决方案中：

dotnet sln add b13video/b13video.csproj

3. Pages\_Host.cshtml 引用 video-js.css

<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">

4. 接下来，Pages\_Host.cshtml 引用 Video.js, 添加以下脚本文件到Pages\_Host.cshtml

<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>

<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

<script src="https://unpkg.com/@@videojs/http-streaming/dist/videojs-http-streaming.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js"></script>

5. 添加 app.js 文件到 wwwroot文件夹

文件内容

function loadPlayer(id, options) {

  videojs(id, options);

}

6. Pages\_Host.cshtml 引用 app.js

<script src="./app.js"></script>

完整文件看起来应该是这样

@page "/"

@using Microsoft.AspNetCore.Components.Web

@namespace b13video.Pages

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base href="~/" />

    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

    <link href="css/site.css" rel="stylesheet" />

    <link href="b13video.styles.css" rel="stylesheet" />

    <link rel="icon" type="image/png" href="favicon.png" />

    <link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

</head>

<body>

    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">

        <environment include="Staging,Production">

            An error has occurred. This application may no longer respond until reloaded.

        </environment>

        <environment include="Development">

            An unhandled exception has occurred. See browser dev tools for details.

        </environment>

        <a href="" class="reload">Reload</a>

        <a class="dismiss"></a>

    </div>

    <script src="_framework/blazor.server.js"></script>

    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>

    <script src="https://unpkg.com/@@videojs/http-streaming/dist/videojs-http-streaming.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js"></script>

    <script src="./app.js"></script>

</body>

</html>

7. Razor 页面, 我们直接在 Index.razor 里添加

<video id="my-player"

       class="video-js"

       controls

       preload="auto"

       poster="//vjs.zencdn.net/v/oceans.png"

       data-setup='{}'>

    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />

    <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm" />

    <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg" />

    <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>

跑一下

8. 封装

取消几行html组件设定,改为c#提供参数, 最终代码如下

<video id="my-player"

       class="video-js"

       muted >

    <p class="vjs-no-js">

        To view this video please enable JavaScript, and consider upgrading to a

        web browser that

@ -17,3 +14,27 @@

        </a>

    </p>

</video>


@inject IJSRuntime jsRuntime

@code{

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            await jsRuntime.InvokeVoidAsync("loadPlayer", "my-player", new

            {

                width = 600,

                height = 300,

                controls = true,

                autoplay = true,

                preload = "auto",

                poster = "//vjs.zencdn.net/v/oceans.png",

                sources = new[] {

                        new { type =  "application/x-mpegURL", src = "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"},

                        new { type =  "video/mp4", src = "//vjs.zencdn.net/v/oceans.mp4"}

                }

            });

        }

    }

}

调试一下,成功运行就进入下一步.

9. 组件化. {最终代码,请大家直接使用CV大法}

Pages\VideoPlayer.razor

@inject IJSRuntime jsRuntime

@namespace Blazor100.Components

<div @ref="element">

    <video id="video_@Id"

           class="video-js"

           muted

           webkit-playsinline

           playsinline

           x-webkit-airplay="allow"

           x5-video-player-type="h5"

           x5-video-player-fullscreen="true"

           x5-video-orientation="portraint">

        <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>

    @if (Debug)

    {

        <pre>@info</pre>

    }

</div>

Pages\VideoPlayer.razor.cs

using b13video.Pages;

using Microsoft.AspNetCore.Components;

using Microsoft.Extensions.Options;

using Microsoft.JSInterop;

using System.Text.Json.Serialization;

using static System.Runtime.InteropServices.JavaScript.JSType;

namespace Blazor100.Components; 

public partial class VideoPlayer : IAsyncDisposable

{

    [Inject] IJSRuntime? JS { get; set; }

    private IJSObjectReference? module;

    private DotNetObjectReference<VideoPlayer>? instance { get; set; }

    protected ElementReference element { get; set; }

    private bool init;

    private string? info;

    private string Id { get; set; } = Guid.NewGuid().ToString();

    /// <summary>

    /// 资源类型

    /// </summary>

    [Parameter]

    public string? SourcesType { get; set; }

    /// <summary>

    /// 资源地址

    /// </summary>

    [Parameter]

    public string? SourcesUrl { get; set; }

    [Parameter]

    public int Width { get; set; } = 300;

    [Parameter]

    public int Height { get; set; } = 200;

    [Parameter]

    public bool Controls { get; set; } = true;

    [Parameter]

    public bool Autoplay { get; set; } = true;

    [Parameter]

    public string Preload { get; set; } = "auto";

    /// <summary>

    /// 设置封面

    /// </summary>

    [Parameter]

    public string? Poster { get; set; }

    [Parameter]

    public VideoPlayerOption? Option { get; set; }

    [Parameter]

    public bool Debug { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        try

        {

            if (firstRender)

            {

                module = await JS!.InvokeAsync<IJSObjectReference>("import", "./app.js");

                instance = DotNetObjectReference.Create(this);

                Option = Option ?? new VideoPlayerOption()

                {

                    Width = Width,

                    Height = Height,

                    Controls = Controls,

                    Autoplay = Autoplay,

                    Preload = Preload,

                    Poster = Poster,

                    //EnableSourceset= true,

                    //TechOrder= "['fakeYoutube', 'html5']"

                };

                Option.Sources.Add(new VideoSources(SourcesType, SourcesUrl));

                try

                {

                    await module.InvokeVoidAsync("loadPlayer", instance, "video_" + Id, Option);

                }

                catch (Exception e)

                {

                    info = e.Message;

                    if (Debug) StateHasChanged();

                    Console.WriteLine(info);

                    if (OnError != null) await OnError.Invoke(info);

                }

            }

        }

        catch (Exception e)

        {

            if (OnError != null) await OnError.Invoke(e.Message);

        }

    }

    async ValueTask IAsyncDisposable.DisposeAsync()

    {

        if (module is not null)

        {

            await module.InvokeVoidAsync("destroy", Id);

            await module.DisposeAsync();

        }

    }

    /// <summary>

    /// 获得/设置 错误回调方法

    /// </summary>

    [Parameter]

    public Func<string, Task>? OnError { get; set; }

    /// <summary>

    /// JS回调方法

    /// </summary>

    /// <param name="init"></param>

    /// <returns></returns>

    [JSInvokable]

    public void GetInit(bool init) => this.init = init;

    /// <summary>

    /// JS回调方法

    /// </summary>

    /// <param name="error"></param>

    /// <returns></returns>

    [JSInvokable]

    public async Task GetError(string error)

    {

        info = error;

        if (Debug) StateHasChanged();

        if (OnError != null) await OnError.Invoke(error);

    }

}

Pages\VideoPlayerOption.cs

using System.Text.Json.Serialization;

namespace b13video.Pages

{

    public class VideoPlayerOption

    {

        [JsonPropertyName("width")]

        public int Width { get; set; } = 300;

        [JsonPropertyName("height")]

        public int Height { get; set; } = 200;

        [JsonPropertyName("controls")]

        public bool Controls { get; set; } = true;

        [JsonPropertyName("autoplay")]

        public bool Autoplay { get; set; } = true;

        [JsonPropertyName("preload")]

        public string Preload { get; set; } = "auto";

        /// <summary>

        /// 播放资源

        /// </summary>

        [JsonPropertyName("sources")]

        public List<VideoSources> Sources { get; set; } = new List<VideoSources>();

        /// <summary>

        /// 设置封面

        /// </summary>

        [JsonPropertyName("poster")]

        public string? Poster { get; set; } 

        //[JsonPropertyName("enableSourceset")]

        //public bool EnableSourceset { get; set; }

        //[JsonPropertyName("techOrder")]

        //public string? TechOrder { get; set; } = "['html5', 'flash']";

    }

    /// <summary>

    /// 播放资源

    /// </summary>

    public class VideoSources

    {

        public VideoSources() { }

        public VideoSources(string? type, string? src)

        {

            this.Type = type ?? throw new ArgumentNullException(nameof(type));

            this.Src = src ?? throw new ArgumentNullException(nameof(src));

        }

        /// <summary>

        /// 资源类型<para></para>video/mp4<para></para>application/x-mpegURL<para></para>video/youtube

        /// </summary>

        [JsonPropertyName("type")]

        public string Type { get; set; } = "application/x-mpegURL";

        /// <summary>

        /// 资源地址

        /// </summary>

        [JsonPropertyName("src")]

        public string Src { get; set; } = "application/x-mpegURL";

    }

}

wwwroot\app.js

var player = null;

export function loadPlayer(instance, id, options) {

    console.log('player id', id);

    player = videojs(id, options);

    player.ready(function () {

       console.log('player.ready');

       var promise = player.play();

        if (promise !== undefined) {

            promise.then(function () {

                console.log('Autoplay started!');

            }).catch(function (error) {

                console.log('Autoplay was prevented.', error);

                instance.invokeMethodAsync('GetError', 'Autoplay was prevented.'+ error);

            });

        }

        instance.invokeMethodAsync('GetInit', true);

    });

    return false;

}

export function destroy(id) {

    if (undefined !== player && null !== player) {

        player = null;

        console.log('destroy');

    }

}

10. 页面调用

<div class="row">

    <div class="col-4">

        <VideoPlayer SourcesType="application/x-mpegURL" SourcesUrl="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" Debug="true" />

    </div>

    <div class="col-4">

        <VideoPlayer SourcesType="video/mp4" SourcesUrl="//vjs.zencdn.net/v/oceans.mp4" />

    </div>

    <div class="col-4">

        <VideoPlayer SourcesType="application/x-mpegURL" SourcesUrl="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" />

    </div>

</div>

项目源码

Github

知识共享许可协议

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名AlexChow（包含链接： https://github.com/densen2014 ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系 。

AlexChow

今日头条 | 博客园 | 知乎 | Gitee | GitHub

Blazor 组件

条码扫描 ZXingBlazor



图片浏览器 Viewer

条码扫描 BarcodeScanner

手写签名 Handwritten

手写签名 SignaturePad

定位/持续定位 Geolocation

屏幕键盘 OnScreenKeyboard

百度地图 BaiduMap

谷歌地图 GoogleMap

蓝牙和打印 Bluetooth

PDF阅读器 PdfReader

文件系统访问 FileSystem

光学字符识别 OCR

电池信息/网络信息 WebAPI

Blazor组件自做十三: 使用 Video.js 在 Blazor 中播放视频的更多相关文章

  1. Blazor组件自做三 : 使用JS隔离封装ZXing扫码

    Blazor组件自做三 : 使用JS隔离封装ZXing扫码 本文基础步骤参考前两篇文章 Blazor组件自做一 : 使用JS隔离封装viewerjs库 Blazor组件自做二 : 使用JS隔离制作手写 ...

  2. Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件

    1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件 2.1 常规操作,懒加载js库, export function ...

  3. Blazor组件自做一 : 使用JS隔离封装viewerjs库

    Viewer.js库是一个实用的js库,用于图片浏览,放大缩小翻转幻灯片播放等实用操作 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazo ...

  4. Blazor组件自做二 : 使用JS隔离制作手写签名组件

    Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...

  5. Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件

    运行截图 演示地址 响应式演示 感谢szimek写的棒棒的signature_pad.js项目, 来源: https://github.com/szimek/signature_pad 正式开始 1. ...

  6. Blazor组件自做五 : 使用JS隔离封装Google地图

    Blazor组件自做五: 使用JS隔离封装Google地图 运行截图 演示地址 正式开始 1. 谷歌地图API 谷歌开发文档 开始学习 Maps JavaScript API 的最简单方法是查看一个简 ...

  7. Blazor组件自做六 : 使用JS隔离封装Baidu地图

    1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加baidu子文件夹,添加baidumap.js文件 2.1 跟上一篇类似,用代码方式异步加载API,脚本生成新的 body > ...

  8. Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (3)

    接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2) 7. 使用配置文件指定监听地址 打开 appsettings.json 文件,加入一行 "UseUrls&q ...

  9. video.js 一个页面同时播放多个视频

    $(data).each(function(i, item) { // innerHTML += '<li type-id="'+item.id+'">'+ // '& ...

  10. video.js分段自动加载视频【html5视频播放器】

    突发奇想的需求,要在官网上放一个一个半小时的视频教程…… 然而,加载成了问题,页面是cshtml的.net混合网站,不知道哪儿的限制,导致视频加不出来. 没有办法,只能前端想办法了. 于是将视频切割成 ...

随机推荐

  1. 【可视化大屏教程】用Python开发智慧城市数据分析大屏！

    目录 一.开发背景 二.讲解代码 2.1 大标题+背景图 2.2 各区县交通事故统计图-系列柱形图 2.3 图书馆建设率-水球图 2.4 当年城市空气质量aqi指数-面积图 2.5 近7年人均生产总值 ...

  2. slf4j、log4j2及logback使用

    slf4j.log4j2及logback使用 1.问题来源 之前看过关于slf4j.log4j2及logback的介绍,slf4j是门面,log4j2及logback是具体实现,仅使用slf4j门面是 ...

  3. PAT甲级英语单词整理

    proper 正确 合适 vertex(vertices)顶点 respectively 个别 分别 indices 指标 索引 shipping 运输 incompatible 不相容 oxidiz ...

  4. 洛谷P1395 会议 （树的重心）

    这道题考察了树的重心的性质,所有点到中心的距离之和是最小的,所以我们一遍dfs求出树的重心,在跑一次dfs统计距离之和. 1 #include<bits/stdc++.h> 2 using ...

  5. HDU1423 Greatest Common Increasing Subsequence （DP优化）

    LIS和LCS的结合. 容易写出方程,复杂度是nm2,但我们可以去掉一层没有必要的枚举,用一个变量val记录前一阶段的最优解,这样优化成nm. 1<=k<j,j增加1,k的上界也增加1,就 ...

  6. virtualbox的Linux虚拟磁盘大小调整及注意事项

    virtualBox 调整磁盘分区 起因 起初安装centos6.3 时,没有修改默认的硬盘空间.只有8G,导致后面安装完zookeeper,jdk之后,在安装mysql发现磁盘空间不足 扩容步骤 1 ...

  7. 解决@Url.Action("Action", "Controller",new {p1=v1,p2=v2 })的传参问题

    1.首先@Url.Action("Action", "Controller",new {p1=v1,p2=v2 })后面的model参数不可以直接用变量 需要先 ...

  8. Python 多重继承时metaclass conflict问题解决与原理探究

    背景 最近有一个需求需要自定义一个多继承abc.ABC与django.contrib.admin.ModelAdmin两个父类的抽象子类,方便不同模块复用大部分代码,同时强制必须实现所有抽象方法,没想 ...

  9. rocky二进制安装mysql8.0

    (ubuntu的有点问题) 点击查看代码 #!/bin/bash Version=`cat /etc/os-release |awk -F'"| ' '/^NAME/{print $2}'` ...

  10. python 基本使用 异常判断

    简单常用 isinstance 判断一个对象是否是一个已知的类型 arg=123 isinstance(arg, int) #输出True isinstance(arg, str) #输出False ...