zoukankan      html  css  js  c++  java
  • Html5-Video标签以及字幕subtitles和captions的区别

    <video id="mainvideo"   src="video.mp4" type="video/mp4"controls autoplay loop> 
    <track src="en_track.vtt" srclang="en" label="English" kind="caption" default> 
    <track src="cn_track.vtt" srclang="zh-cn" label="简体中文" kind="caption"> 
    </video>

    or

    <video width="640" height="480" controls>  
      <source src="video.mp4" type="video/mp4" />  
      <source src="video.webm" type="video/webm" />  
      <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" />    
    </video>  
    

      

    track标签的属性主要有4个,如下表:

    属性描述

    kind

    定义字幕内容类型,只能是这五种之一: subtitlescaptionsdescriptionschaptersmetadata.

    src

    字幕文件的URL地址

    srclang

    字幕文件的语言类型,标识信息的作用,播放器不使用这个属性。

    label

    字幕标签,每个字幕元素必需设置一个唯一不重复的标签,切换字幕时显示的名称。

    default

    指定是否是默认字幕。如果每个都不指定,将不会自动显示字幕.(chrome浏览器不支持)

    关于属性的一些说明:
    • 如果没有指定类型,默认为字幕(subtitles)。
    • 如果类型是字幕(subtitles),需要指定srclang。
    • 不能有两个相同类型(king)的轨道有同一个标签(label)

    WebVTT字幕文件的MIME类型约定是"text/vtt",需要在IIS或者Apache等Web服务器中配置

    TTML字幕文件的MIME类型约定为application/ttml+xml

    SRT字幕文件,application/x-subrip或者text/plain (注意chrome浏览器不支持srt文件)

    asp.net web.config设置

    <system.webServer>
    <staticContent>
    <remove fileExtension=".vtt" />
    <mimeMap fileExtension=".vtt" mimeType="text/vtt" />
    </staticContent>
    </system.webServer>

    subtitles和captions的区别

    1. Captions are intended for deaf and hard-of-hearing audiences. The assumed audience for subtitling is hearing people who do not understand the language of dialogue.(Captions 目的在于听力障碍的观众,subtitles目的是帮助正常观众理解对话的语言)
    2. Captions are usually in the same language as the audio. Subtitles are usually a translation.(Captions 语言和对话通常是同一种,Subtitles通常是对话语言翻译)

    插件mediaelementJS: https://github.com/johndyer/mediaelement  (支持srt和vtt格式字幕,且kind=subtitles,不支持captions)

    参考

    http://joeclark.org/access/resources/understanding.html

    https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video

  • 相关阅读:
    frog-jump
    nth-digit
    binary-watch
    elimination-game
    evaluate-division
    random-pick-index
    integer-replacement
    rotate-function
    longest-substring-with-at-least-k-repeating-characters
    decode-string
  • 原文地址:https://www.cnblogs.com/imust2008/p/5255348.html
Copyright © 2011-2022 走看看