关于video如何引入字幕的操作

2017-4-7 liuweibo JavaScript

使用 track 元素，可以为 HTML5 video 元素添加计时文本轨道（如隐藏字幕、翻译或文字解说词）。

比如

<video id="mainvideo" controls autoplay loop>
  <track src="en_track.vtt" srclang="en" label="English" kind="caption" default>
</video>

此时是内置字幕

kind:指定文本内容的类型。可能的值包括 subtitles、captions、descriptions、chapters 和 metadata。

src:文件的URl

srclang:计时文本文件的语言。仅供参考；不在播放器中使用。

label:提供一个可用于标识计时文本的标签。每个轨道必须具有唯一的标签。

default:指定默认的轨道元素。如果未指定，则不显示任何轨道。

如果想修改字幕文字样式，需要获取字幕此时的文字内容，把文字内容放在div里显示，置于video之上，此时不是内置字幕,而且kind="metadata",把内置字幕关掉。

比如

<!DOCTYPE html >
<html >
  <head>
  <title>Styled text example</title>
    <!-- only force Internet Explorer 10 standards for testing on local machine -->
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
   <style type="text/css">
    
    #display
    {       
      position:absolute;    
      display:block;   
      text-align :center;
      color:yellow;
      font-size:24px;
      font-family:Comic Sans MS;
      text-shadow: 0.1em 0.1em 0.15em #333;
      z-index:100; /* set z-index to be sure div is on top */
    }    
   </style>
    <script type="text/javascript">        
        var video;
        document.addEventListener("DOMContentLoaded", function () {  // don't run this until all DOM content is loaded 
            //  get objects associated with the video, track, and div elements  
            video = document.getElementById("video1");
            var disp = document.getElementById("display");
            var track = document.getElementById("track1");           

            video.addEventListener("loadedmetadata", function () {
                document.getElementById("player").style.width = video.videoWidth + "px";  // make enclosure div width == video width
                disp.style.top = (video.style.top + (video.videoHeight * .05)) + "px"; // set the text to appear at 5% from the top of the video
                disp.style.left = video.style.left;  // set the text to appear relative to the left edge of the video
                disp.style.width = video.videoWidth + "px"; // set text box to the width of the video
            }, false);

            track.addEventListener("cuechange", function () {
                var myTrack = this.track;             // track element is "this" 
                var myCues = myTrack.activeCues;      // activeCues is an array of current cues.                                                    
                if (myCues.length > 0) {
                    disp.innerText = myCues[0].text;   // write the text
                }
            }, false);
        }, false);
                    
    </script>
  </head>
  <body>
    <div id="player" style="width:640px;"> <!-- container div that is sized by script -->
      <video id="video1" controls style="width:100%;">
        <source src="video.mp4"  >
        <!-- by using "metadata" as the kind, it will suppress the video player's own caption display -->
        <track id="track1" label="English captions" src="entrack.vtt" kind="metadata" srclang="en" default>    
      </video>
      <div id="display">      
     </div>    
    </div>
  </body>
</html>

分享到： QQ空间新浪微博腾讯微博微信更多

« 异步方式处理--layer弹出层封装 | 解决linux 连接mysql数据库超级慢»

关于video如何引入字幕的操作

日历

存档

最新评论

链接

搜索