html track标签,HTML track标签

本文概述

HTML 标记用于为媒体文件定义基于时间的文本轨道。 标记必须用作和元素的子元素。

标记用于添加字幕, 标题或播放媒体文件时显示的任何其他形式的文本。

HTML 是HTML5中的新标记。

句法

以下是有关HTML 标记的一些规范

Display

None

开始日期/结束日期

Only start tag(End tag forbidden)

Usage

HTML媒体

HTML track Tag

Example of track tag

Sorry!Your browser does not support the track

立即测试

在上面的示例中, 我们使用了flower.vtt文件在视频文件中添加字幕。以下是flower.vtt文件:

htmltracktag.png

如何创建WEBVTT文件

以下是为标签创建WEBVTT文件的一些基本步骤:

在PC中打开文本编辑器, 例如记事本

将WEBVTT编写为编辑器的第一行

留空行

以正确的格式指定持续时间(你也可以提供编号并添加CSS)。

输入并输入要添加字幕或标题的文本, 然后重复步骤3到5, 直到完成。

使用.vtt扩展名保存。

现在, 你的WEBVTT文件可以使用了。

属性

特定于标签的属性:

属性

描述

default

default

它指定应该启用该轨道, 除非用户的首选项指示另一个轨道更重要。

kind

字幕章节描述元数据字幕

它指定要添加的文本轨道的类型。

label

text

它指定文本轨道的标题。

src

URL

它定义了跟踪文件的URL。

srclang

language_code

它定义了跟踪文本内容的语言, 例如英语, 德语等。

全局属性:

标记支持HTML中的Global属性。

事件属性:

标记支持HTML中的Event属性。

支持的浏览器

Element

Chrome

IE

Firefox

Opera

Safari

Yes

Yes

Yes

Yes

Yes

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在HTML中显示中间的播放按钮,可以使用HTML5视频标签和一些CSS样式来实现。 首先,在HTML中添加一个视频标签,并设置视频的源文件路径和其他属性,例如宽度、高度等。示例代码如下: ```html <video id="my_video" width="640" height="360"> <source src="video.mp4" type="video/mp4"> </video> ``` 然后,在CSS样式中将视频标签的控制区域显示为块级元素,并将其位置设置为相对定位。示例代码如下: ```css #my_video::-webkit-media-controls-panel { display: block; position: relative; } ``` 接下来,可以使用JavaScript来跟踪点击播放按钮。根据引用的提示,在JavaScript中获取视频元素,并添加事件监听器来响应点击事件。示例代码如下: ```javascript var video = document.getElementById("my_video"); video.addEventListener("click", function() { if (video.paused) { video.play(); } else { video.pause(); } }); ``` 最后,可以根据需要自定义播放按钮的样式和位置,例如在控制区域的中间显示一个按钮图标。可以使用CSS来添加样式和位置调整。示例代码如下: ```css #my_video::-webkit-media-controls-play-button { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background-image: url("play-button.png"); background-size: cover; } ``` 这样,您就可以在HTML中的视频标签的控制区域中显示一个位于中间的播放按钮了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [在html5视频控制区跟踪点击播放按钮(Track clicks to play button in html5 video control area)](https://blog.csdn.net/weixin_36278817/article/details/118718369)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值