2024-02-11

我正在尝试创建一个可访问的<video>常规 HLS 视频流的元素。但是,我注意到没有跨浏览器的方式来指定多个音轨并在它们之间有效地切换,就像使用隐藏式字幕一样。

我考虑过audioTrack属性,但这在许多浏览器上不起作用。我试过了mediaGroup同样,这也不跨浏览器兼容。

我见过唯一可行的是video.js (https://docs.videojs.com/docs/guides/audio-tracks.html https://docs.videojs.com/docs/guides/audio-tracks.html),但我想知道是否有一种方法可以在不引入这个库的情况下做到这一点。

如果没有库你就无法做到这一点,这似乎很奇怪。

最终目标是以编程方式在所有(大多数)浏览器上的 HTML5 视频上切换不同语言音频的音轨。


如果我理解正确的话,您希望能够在视频轨道上切换语言。我发现这段代码的主音轨是英语,允许您使用以下命令在英语和法语之间切换视频.音频轨道 https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks草案财产。您可以在 https 上阅读更多相关信息:姜科技网 https://gingertech.net/2011/05/01/html5-multi-track-audio-or-video/

<video id="v1" poster=“video.png” controls>
<source src=“video.ogv” type=”video/ogg”>
<source src=“video.mp4” type=”video/mp4”>
</video>

<script type="text/javascript">
video = document.getElementsByTagName("video")[0];

for (i=0; i < video.audioTracks.length; i++) {
    if (video.audioTracks[i].language.substring(0,2) === "fr") {
        video.audioTracks[i].enabled = true;
    } else {
        video.audioTracks[i].enabled = false;
    }
}
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • JavaScript 重定向到新窗口

    我有以下代码 它根据下拉列表的值重定向到页面 我如何使其在新窗口中打开 function goto form var index form select selectedIndex if form select options index
  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch

随机推荐

  • 如何用C++扩展TCL?

    我可以编写可编译并用于扩展 TCL 的 C 代码 我不是指调用可执行文件 吗 我可以描述一些类 函数并通过调用已编译的 so 或 a 文件 C 代码在我的 TCl 代码中使用它们吗 如果是 请示意性地向我解释一下它是如何完成的 http c
  • CodeFirst 相对于 Database First 的优势是什么?

    我正在观看 EF 4 1 的一些视频和教程 我不明白 CodeFirst 的任何好处 除了一些 DB 非常小的 3 4 个表并且我懒得先创建 DB 的情况 大多数情况下 迄今为止最好的方法是在某种数据库编辑器中创建数据库 这肯定比在实体模型
  • Python:如何用常规属性替换属性?

    基类有这样的 def management form self code here return form management form property management form 在我的派生类中 我试图这样写 self manag
  • CSS无冲突样式

    创建 CSS 样式表的无冲突版本的好方法是什么 假设您有一堆代码 其中的类与 Bootstrap 的类重叠 这是否有效 添加一个class bootstrap 到应应用引导样式的祖先元素 然后更改bootstrap css为每个添加前缀ru
  • JXA:从 CoreServices 访问 CFString 常量

    JXA https developer apple com library mac releasenotes InterapplicationCommunication RN JavaScriptForAutomation Articles
  • XML 数据类型方法“value”的参数 1 必须是字符串文字

    我已经读过SO XML 数据类型方法 值 必须是字符串文字 https stackoverflow com q 11029674 62576但我的问题有点不同 我在一个变量中有一些 xml 我想将其分开并给出一个路径 最初我尝试过这个 de
  • 带有组的pivot_longer并删除列名前缀[重复]

    这个问题在这里已经有答案了 我正在尝试使用pivot longer 将数据帧从宽格式转换为长格式 原始数据框是 df start lt structure list amprise 0 015 ampfull 0 005 ampfall 0
  • 桶的索引计数

    所以 这是我的小问题 Let s say I have a list of buckets a0 an which respectively contain L lt c0 cn lt H items I can decide of the
  • 使用 tastypie 的 REST url

    我在 django 应用程序中使用 tastypie 并尝试让它映射像 api booking 2011 01 01 这样的 URL 该 URL 映射到 URL 中具有指定时间戳的 Booking 模型 该文档没有说明如何实现这一点 您想要
  • 如何在离开用户界面状态时停止 $interval?

    Angular UI 路由器 在状态控制器中使用 interval 如下所示 scope Timer null scope startTimer function scope Timer interval scope Foo 30000 s
  • 使用 cmd.exe /c 相对于根本不使用 cmd 的优点

    如果我在 C 中运行一个进程 使用 cmd c 比直接运行进程有什么好处吗 Ex ProcessStartInfo info new ProcessStartInfo cmd exe info Arguments c application
  • 区分键盘的真实按键和虚拟按键

    我正在用 C 编写一个程序 它必须模拟键盘的按键命令 问题是 我需要模拟 真实 的键盘按钮点击 而不是假的 例如 据我了解 当用户按下键盘上的任何按钮时 信号通过 USB 发送 然后通过键盘驱动程序继续 当使用 API SendInput
  • 将 async/await 与 DataReader 一起使用? (没有中间缓冲区!)

    我的目标很简单 我想做异步 I O 调用 使用 async wait 但是 不使用 DataFlow 依赖项 就像这个答案一样 https stackoverflow com a 13148683 859154 没有中间缓冲区 不喜欢这个答
  • 在 WPF Frame 控件中关闭导航页面声音

    我在 WPF 窗口中有一个 Frame 元素 并且应用程序中的所有内容都是使用 Frame Navigate 加载的 但是 当导航到新页面时 默认会播放该声音 它与 Internet Explorer 中播放的声音相同 有什么方法可以从应用
  • Visual Studio 2015 中的默认日期时间选择器仅显示日期选择器,不允许选择时间

    我正在使用 Visual Studio 2015 并且在我的 MVC5 应用程序中使用其默认日期时间选择器 我在显示日期时间选择器时遇到问题 它仅显示日期选择器而不显示时间选择器 但我也需要时间选择器 这是我在模型中的 datetimepi
  • ValueError:使用 pandas hub_table 不允许使用负尺寸

    我正在尝试制作项目 项目协作推荐代码 我的完整数据集可以找到here https drive google com open id 0B7KsvcvcTJ4DeU1IRE93ZHVnRGM 我希望用户成为行 项目成为列 评级成为值 我的代码
  • .NET 中的串行端口通信

    我正在使用 C 从串行端口接收数据 但存在一些问题 我对此很陌生 所以我需要一些帮助 首先我想知道哪些函数是事件驱动的 ReadExisting Read Readbyte Readchar ReadLine Readto 如何从该端口的输
  • Spark 读取路径/文件名中包含空格的 csv 文件时出错

    我想使用 Spark 读取 csv 文件 文件的路径有空格 Spark 正在将空格替换为 20 这是代码 val tmpDF spark read format com databricks spark csv option multiLi
  • 在 Android 上运行标准 Java 代码

    我想在 Android 上运行我的 Java 代码 但我对活动不熟悉 如何在 Activity 上调用 WordPuzzle 安卓活动 public class Puzzle extends Activity public void onC
  • 我正在尝试创建一个可访问的