自适应流媒体播放器（Shaka player）在线示例

流媒体是一种不需要完整下载，边下载边播放的在线媒体传播技术。目前主流的是基于html5 video标签和http协议的顺序流媒体和实时流媒体技术。

video, streaming, player

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3232
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<p>这是Google的Shaka播放器的一个演示，它是一个用于自适应视频流的javascript库。</p>

<p>选择一个资源并点击 <strong>Load</strong> 按钮. (在Android上, 你可能还需要点击视频上的播放按钮。)
        </p>

<div class="flex">
            <label for="assetList">资源:</label>
            <select id="assetList" class="flex-grow"></select>
        </div>
        <div id="customAsset">
            <div class="flex">
                <label for="manifestInput">Custom manifest:</label>
                <input id="manifestInput" type="text" class="flex-grow">
            </div>
            <div class="flex">
                <label for="licenseServerInput">Custom license server:</label>
                <input id="licenseServerInput" type="text" class="flex-grow">
            </div>
            <div class="flex">
                <label for="certificateInput">Custom license certificate URL:</label>
                <input id="certificateInput" type="text" class="flex-grow">
            </div>
        </div>

<div>
            <button id="loadButton">Load</button>
            <button id="unloadButton">Unload</button>
        </div>
    </div>

<div id="errorDisplay">
        <div id="errorDisplayCloseButton">x</div>
        <a id="errorDisplayLink" href="#"></a>
    </div>
    <div id="videoContainer" class="overlay-parent">
        <video id="video" autoplay></video>
        <div id="giantPlayButtonContainer" class="overlay">
            <button id="giantPlayButton" class="material-icons">play_arrow</button>
        </div>
        <div id="bufferingSpinner" class="overlay">
            <svg class="spinnerSvg" viewBox="25 25 50 50">
                <circle class="spinnerPath" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
            </svg>
        </div>
        <div id="castReceiverName" class="overlay"></div>
        <div id="controlsContainer" class="overlay">
            <div id="controls">
                <button id="playPauseButton" class="material-icons">play_arrow</button>
                <label for="seekBar" class="for-screen-readers">seek</label>
                <input id="seekBar" type="range" step="any" min="0" max="1" value="0">
                <button id="rewindButton" class="material-icons">fast_rewind</button>
                <div id="currentTime">0:00</div>
                <button id="fastForwardButton" class="material-icons">fast_forward</button>
                <button id="muteButton" class="material-icons">volume_up</button>
                <label for="volumeBar" class="for-screen-readers">volume</label>
                <input id="volumeBar" type="range" step="any" min="0" max="1" value="0">
                <button id="castButton" class="material-icons">cast</button>
                <button id="captionButton" class="material-icons">closed_caption</button>
                <button id="fullscreenButton" class="material-icons">fullscreen</button>
            </div>
        </div>
    </div>

<details class="input">
        <summary>Configuration</summary>
        <div class="flex">
            <label for="preferredAudioLanguage">Preferred audio language:</label>
            <input id="preferredAudioLanguage" class="flex-grow" type="text">
        </div>
        <div class="flex">
            <label for="preferredTextLanguage">Preferred text language:</label>
            <input id="preferredTextLanguage" class="flex-grow" type="text">
        </div>
        <div class="flex">
            <label for="preferredAudioChannelCount">Preferred audio channel count:</label>
            <input id="preferredAudioChannelCount" type="number">
        </div>
        <div>
            <label for="showNative">Show native browser controls:</label>
            <input id="showNative" type="checkbox">
        </div>
        <div>
            <label for="showTrickPlay">Show trick play controls:</label>
            <input id="showTrickPlay" type="checkbox">
        </div>
        <div>
            <label for="enableAdaptation">Enable adaptation:</label>
            <input id="enableAdaptation" type="checkbox" checked>
        </div>
        <div>
            <label for="enableLoadOnRefresh">Auto-load on page refresh:</label>
            <input id="enableLoadOnRefresh" type="checkbox">
        </div>
        <div>
            <label for="logToScreen">Log to the screen:</label>
            <input id="logToScreen" type="checkbox">
        </div>
        <div>
            <label for="smallGapLimit">Maximum small gap size:</label>
            <input id="smallGapLimit" class="flex-grow" type="text">
        </div>
        <div>
            <label for="jumpLargeGaps">Jump large gaps:</label>
            <input id="jumpLargeGaps" type="checkbox">
        </div>
        <div id="logLevelListDiv" hidden>
            <label for="logLevelList">Log Level:</label>
            <select id="logLevelList" class="flex-grow">
                <option value="info">Info</option>
                <option value="debug">Debug</option>
                <option value="v">Verbose</option>
                <option value="vv">Very Verbose</option>
            </select>
        </div>
        <div>
            <label for="drmSettingsVideoRobustness">Video Robustness:</label>
            <input id="drmSettingsVideoRobustness" type="text" class="flex-grow" list="robustnessSuggestions">
        </div>
        <div>
            <label for="drmSettingsAudioRobustness">Audio Robustness:</label>
            <input id="drmSettingsAudioRobustness" type="text" class="flex-grow" list="robustnessSuggestions">
        </div>
        <div>
            <label for="availabilityWindowOverride">Availability Window Override:</label>
            <input id="availabilityWindowOverride" type="number" step="30" min="0">
        </div>
        <datalist id="robustnessSuggestions"></datalist>
    </details>

<details class="input">
        <summary>Info</summary>
        <div class="flex">
            <label for="audioLanguages">Audio languages:</label>
            <select id="audioLanguages" class="flex-grow"></select>
        </div>

<div class="flex">
            <label for="variantTracks">Video+audio track combinations:</label>
            <select id="variantTracks" class="flex-grow"></select>
        </div>

<div class="flex">
            <label for="textLanguages">Text languages:</label>
            <select id="textLanguages" class="flex-grow"></select>
        </div>

<div class="flex">
            <label for="textTracks">Text tracks:</label>
            <select id="textTracks" class="flex-grow"></select>
        </div>

<div>
            <span class="label">Active resolution:</span>
            <span id="videoResDebug"></span>
        </div>

<div>
            <span class="label">Buffered:</span>
            <span id="bufferedDebug"></span>
        </div>
    </details>

<details id="offlineSection" class="input">
        <summary>Offline</summary>
        <div>
            <button id="storeDeleteButton">Store</button>
            <span id="storeDeleteHelpText"></span>
        </div>
        <div id="progressDiv">
            <span class="label">Progress:</span>
            <span id="progress">0</span>%
        </div>
        <div id="offlineNameDiv">
            <label for="offlineName">Name:</label>
            <input id="offlineName" class="flex-grow" type="text">
        </div>
    </details>
</div>

流媒体是一种不需要完整下载，边下载边播放的在线媒体传播技术。目前主流的是基于html5 video标签和http协议的顺序流媒体和实时流媒体技术。

video, streaming, player

编辑器支持Emmet

快捷键

流媒体是一种不需要完整下载，边下载边播放的在线媒体传播技术。目前主流的是基于html5 video标签和http协议的顺序流媒体和实时流媒体技术。

video, streaming, player

使用VueJS和ThreeJS构建的SomaFM电台音乐播放器

基于RxJS实现的3D悬浮卡片音乐播放器（含亮色和暗色界面方案切换）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：