热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html5track标签是什么意思?html5track标签的使用方法介绍-

本篇文章为大家介绍了关于html5track标签的定义及其使用方法,还有关于html5track标签的可选属性的一些描述,希望大家能都认真读完这篇文章。
本篇文章为大家介绍了关于html5 track标签的定义及其使用方法,还有关于html5 track标签的可选属性的一些描述,希望大家能都认真读完这篇文章。

html5 track标签的定义和用法:

标签为诸如 video 元素之类的媒介规定外部文本轨道。

用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。

html5标签可选的属性:

  • default:默认轨道。(值:default)。default属性用于通知浏览器在用户没有选择使用其他字幕文件的时候可以使用当前 track文件

  • kind:文本轨道的文本类型(值:captions、chapters、descriptions、metadata、subtitles)。kind属性用于指定字幕文件(即用于存放字幕、章节标题、说明文字或元数据的文件) 的种类。可以对kind属性指定的属性值为subtitles、captions、descriptions、chapters与metadata

  • label:文本轨道的标签和标题(值:text)。

  • src:轨道文件的URL,必选属性(值:URL)。src属性用于指定字幕文件的存放路径,该属性是一个必须使用的属性。src属性的属性值可以是一个绝对URL路径,也可以是一个相对URL路径。

  • srclang:轨道文本数据的语言。(值:language_code )。srclang属性用于指定字幕文件的语言。例如,srclang="en" 和srclang="zh-cn"分别表示字幕文件为英语和汉语。

标签支持html全局属性和html事件属性

html5 track标签的格式:

HTML5 标签实例

带有两个字幕轨道的视频:

html5中的Track 对象

Track 对象是 HTML5 新增的。

Track 对象表示 HTML5 元素。

访问 html5中的Track 对象

你可以通过使用 getElementById() 来访问 元素:

var x = document.getElementById("myTrack");

创建html5中的Track 对象

你可以使用 document.createElement() 方法来创建 元素:

var x = document.createElement("TRACK");

html5 track标签的使用方法介绍:

track元素可以为使用video元素播放的视频或使用audio元素播放的音频添加字幕、标题或章节等文字信息。track元素为视频添加字幕的过程和为音频添加字幕的过程是相同的。track元素是video元素的子元素,标记必须被书写在 video元素的开始标记与结束标记之间。如果使用标记描述媒体文件,则标记必须被书写在标记之后。track元素是一个空元素,其开始标记与结束标记之间不包含任何内容。

浏览器支持

Internet Explorer 10, Chrome 以及 Opera 支持 标签。

HTML 4.01 与 HTML 5 之间的差异

标签是 HTML 5 中的新标签。

【小编的

推荐阅读
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • JavaScript中属性节点的类型及应用
    本文深入探讨了JavaScript中属性节点的不同类型及其在实际开发中的应用,帮助开发者更好地理解和处理HTML元素的属性。通过具体的案例和代码示例,我们将详细解析如何操作这些属性节点。 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • 本文探讨了在使用Selenium进行自动化测试时,由于webdriver对象实例化位置不同而导致浏览器闪退的问题,并提供了详细的代码示例和解决方案。 ... [详细]
  • 在跨浏览器开发中,一个常见的问题是关于如何在鼠标悬停时显示图片提示信息。本文深入探讨了 IE 浏览器对 IMG 元素 alt 属性的特殊处理,并提供了最佳实践建议。 ... [详细]
  • 如何清除Chrome浏览器地址栏的特定历史记录
    在使用Chrome浏览器时,你可能会发现地址栏保存了大量浏览记录。有时你可能希望删除某些特定的历史记录而不影响其他数据。本文将详细介绍如何单独删除地址栏中的特定记录以及批量清除所有历史记录的方法。 ... [详细]
  • 利用Selenium与ChromeDriver实现豆瓣网页全屏截图
    本文介绍了一种使用Selenium和ChromeDriver结合Python代码,轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行,而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • 本文详细比较了CSS选择器和XPath在Selenium中通过页面结构定位元素的优劣,并提供了具体的代码示例,帮助读者理解两者在不同场景下的适用性。 ... [详细]
  • 本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作,并介绍了获取本地文件路径的方法。HTML5提供了一系列API,使得这些操作变得更加简便和安全。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文介绍了使用不同工具和方法来查看设置了密码保护的易语言源码的方法。不仅限于特定浏览器,还提供了使用Chrome等主流浏览器的解决方案。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
author-avatar
xeyuxing369
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有