@page "/video-player"
@inject IStringLocalizer<VideoPlayers> Localizer

<h3>@Localizer["VideoPlayersTitle"]</h3>

<PackageTips Name="BootstrapBlazor.VideoPlayer" />

<Tips class="mt-3">
    <p>@((MarkupString)Localizer["VideoPlayersTips"].Value)</p>
</Tips>

<DemoBlock Title="@Localizer["VideoPlayersNormalTitle"]"
           Introduction="@Localizer["VideoPlayersNormalIntro"]"
           Name="Normal">
    <div class="row g-3">
        <div class="col-6 col-sm-6 col-md-3 col-xl-auto">
            <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ChangeURL" />
        </div>
        <div class="col-6 col-sm-6 col-md-6  col-xl-auto">
            <BootstrapInput @bind-Value="@Url" />
        </div>
        <div class="col-6 col-sm-6 col-md-4 col-xl-auto">
            <BootstrapInput @bind-Value="@MineType" />
        </div>
        <div class="col-6 col-sm-6 col-md-2 col-xl-auto">
            <Button Color="Color.Primary" OnClick="Apply">加载</Button>
        </div>
    </div>
    <br />
    <VideoPlayer @ref="Player" MineType="@MineType" Url="@Url" Width="500" Height="380" />
</DemoBlock>

<DemoBlock Title="@Localizer["VideoPlayersChangeURLTitle"]"
           Introduction="@Localizer["VideoPlayersChangeURLIntro"]"
           Name="ChangeURL">
    <div class="row g-3">
        <div class="col-6">
            <VideoPlayer MineType="application/x-mpegURL" Url="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" />
        </div>
        <div class="col-6">
            <VideoPlayer MineType="video/mp4" Url="//vjs.zencdn.net/v/oceans.mp4" />
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
<br />
<h5>@Localizer["MineType"]</h5>
<ol>
    <li>opus: 'video/ogg'</li>
    <li>ogv: 'video/ogg'</li>
    <li>mp4: 'video/mp4'</li>
    <li>mov: 'video/mp4'</li>
    <li>m4v: 'video/mp4'</li>
    <li>mkv: 'video/x-matroska'</li>
    <li>m4a: 'audio/mp4'</li>
    <li>mp3: 'audio/mpeg'</li>
    <li>aac: 'audio/aac'</li>
    <li>caf: 'audio/x-caf'</li>
    <li>flac: 'audio/flac'</li>
    <li>oga: 'audio/ogg'</li>
    <li>wav: 'audio/wav'</li>
    <li>m3u8: 'application/x-mpegURL'</li>
    <li>mpd: 'application/dash+xml'</li>
    <li>jpg: 'image/jpeg'</li>
    <li>jpeg: 'image/jpeg'</li>
    <li>gif: 'image/gif'</li>
    <li>png: 'image/png'</li>
    <li>svg: 'image/svg+xml'</li>
    <li>webp: 'image/webp'</li>
</ol>
