如何启用Azure Media Player的进度条及其他控制功能？

1. 补全Azure Media Player依赖文件 #

你的代码缺少AMP核心的CSS、JS以及hotkeys插件文件，这是控件、插件无法正常工作的核心原因。需从Azure Media Player官方资源获取以下文件并引入到HTML头部：

• 核心样式文件（默认皮肤）：azuremediaplayer.min.css
• 核心脚本文件：azuremediaplayer.min.js
• Hotkeys插件脚本：azuremediaplayer.hotkeys.min.js

引入示例：

<link href="/your-project-path/azuremediaplayer.min.css" rel="stylesheet">
<script src="/your-project-path/azuremediaplayer.min.js"></script>
<script src="/your-project-path/azuremediaplayer.hotkeys.min.js"></script>

2. 修复快进/快退按钮与方向键功能 #

快进快退按钮 #

默认AMP控件已包含快进快退按钮，确保满足以下条件即可正常显示：

• 已正确引入AMP核心样式文件
• 配置中controls参数设为true（你的代码已满足）
• 视频源支持seek操作（MP4格式通常默认支持，HLS/DASH流需确保服务端允许跳转）

方向键功能 #

你的hotkeys配置逻辑正确，但需确保hotkeys插件脚本已加载。可调整seekStep参数优化跳转体验（比如设为5秒更符合常规使用习惯）：

plugins: {
    hotkeys: {
        volumeStep: 0.1,
        seekStep: 5, // 调整为每次跳转5秒
        enableMute: true,
        enableFullscreen: true,
        enableNumbers: true,
        enableJogStyle: true
    }
}

3. 启用字幕功能 #

你配置的cea708CaptionsSettings仅适用于直播流的嵌入式隐藏字幕，对于MP4这类点播视频，需使用WebVTT格式的外挂字幕，可通过两种方式添加：

方式1：HTML标签静态添加 #

在<video>标签内插入<track>元素定义字幕：

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered">
    <track kind="captions" label="English" srclang="en" src="/your-project-path/subtitles-en.vtt" default>
    <track kind="captions" label="中文" srclang="zh" src="/your-project-path/subtitles-zh.vtt">
</video>

方式2：JS动态添加 #

若需通过代码控制字幕加载，可使用播放器的addRemoteTextTrack方法：

// 初始化播放器后执行
myPlayer.addRemoteTextTrack({
    kind: 'captions',
    label: 'English',
    srclang: 'en',
    src: '/your-project-path/subtitles-en.vtt',
    mode: 'showing' // 设置默认显示字幕
}, false);

完整可运行示例代码 #

<!DOCTYPE html>
<html>
<head>
    <link href="/your-project-path/azuremediaplayer.min.css" rel="stylesheet">
    <script src="/your-project-path/azuremediaplayer.min.js"></script>
    <script src="/your-project-path/azuremediaplayer.hotkeys.min.js"></script>
</head>
<body>
    <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered">
        <track kind="captions" label="English" srclang="en" src="/your-project-path/subtitles-en.vtt" default>
    </video>
    <script>
        var myOptions = {
            autoplay: true,
            controls: true,
            width: "640",
            height: "400",
            poster: "",
            playbackSpeed: {
                enabled: true,
                initialSpeed: 1.0,
                speedLevels: [
                    { name: "x4.0", value: 4.0 },
                    { name: "x3.0", value: 3.0 },
                    { name: "x2.0", value: 2.0 },
                    { name: "x1.75", value: 1.75 },
                    { name: "x1.5", value: 1.5 },
                    { name: "x1.25", value: 1.25 },
                    { name: "normal", value: 1.0 },
                    { name: "x0.75", value: 0.75 },
                    { name: "x0.5", value: 0.5 },
                ]
            },
            plugins: {
                hotkeys: {
                    volumeStep: 0.1,
                    seekStep: 5,
                    enableMute: true,
                    enableFullscreen: true,
                    enableNumbers: true,
                    enableJogStyle: true
                }
            }
        };
        var myPlayer = amp("azuremediaplayer", myOptions);
        myPlayer.src([{ src: "/your-project-path/test.mp4", type: "video/mp4" }]);
    </script>
</body>
</html>

关键注意事项 #

• 字幕文件（.vtt）需与视频文件同域，或配置服务器CORS规则允许跨域访问
• 若使用直播流的CEA708字幕，需确保流本身已嵌入CEA708数据，仅需开启cea708CaptionsSettings.enabled: true即可
• 测试前清除浏览器缓存，避免旧资源干扰功能正常运行

内容的提问来源于stack exchange，提问作者Ankur