时间戳

首页 > 解决方案 > 有没有一种简单的方法可以将字幕放置在 HLML5 视频下方？

video - 有没有一种简单的方法可以将字幕放置在 HLML5 视频下方？

问题描述

我尝试寻找答案，但找不到可行的答案。

有没有一种简单的方法可以将字幕放置在 HLML5 视频帧下方？

换句话说，我不希望字幕/字幕出现在视频帧本身内。我希望它们出现在视频帧下方大约 1/2 英寸处。

目前字幕位于标准 .srt 文件中，但我可以将字幕调整为适用于此的方法。

我目前也在使用 HTML<video>元素。

下图代表了我想要完成的事情。

Sam Dutton 的Example有一个视频示例，但他引用 Eric Bidelman 的代码是一个死链接。

在示例页面上，Sam Dutton 展示了代码片段，但我可以从中做出任何事情。

在示例页面上播放示例视频，看看我在说什么。

先感谢您。

视频帧下方的字幕/字幕示例

标签： videohtml5-video

解决方案

好吧，我看起来像是在回答我自己的问题。

由于在网上搜索可能的解决方案没有产生可行的结果，我回去花了几个小时在 Sam Dutton 页面上的视频示例上工作。

由此，我能够组合出一个简化的 HTML5 视频解决方案，该解决方案可以重新定位视频上方或下方的字幕，如上图所示。

下面是两个解决方案的完整 HTML 代码。

(1) 简化解决方案 - 运行良好的最小代码解决方案。

(2) 完整解决方案 - 产生与 Sam Dutton 页面上相同的结果。

解决方案包括.webm视频和.vtt字幕文件。MP4视频和.srt字幕也可以。

注意： HTML 代码必须驻留在 Web 服务器上才能正常运行。它在非服务器类型的本地计算机上无法正常运行。只需将代码保存在 HTML 文件 (.html) 中并将其上传到 Web 服务器。

以下是尝试在 Chrome 浏览器中本地打开 .html 文件时显示的调试安全通知：

 *Unsafe attempt to load URL https://www....../subtitles.vtt from frame with
 URL http://www........video.html. Domains, protocols and ports must match.*

如果您正在寻找类似的解决方案，我希望这会有所帮助。

山姆

(1) 简化解决方案 - 运行良好的最小代码解决方案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<style type="text/css">
<!--
#video_container {max-width:400px; margin:auto; border:1px solid #404040;}
video {max-width:100%; outline:none;}
div#video {text-align:center;}
div#video video {margin:0;}
div#video > div {margin-top:5px; text-align:center; color:#404040; font-family:Arial, Helvetica, Verdana, sans-serif; font-size:1.0em;}
//-->
</style>
</head>
<body>

<div id="video_container">
<div id="video">
  <video width="400px" controls>
    <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
    <track label="English subtitles" kind="subtitles" srclang="en" src="subtitles.vtt" default>
  </video>
  <div>subtitle position</div>
</div>
</div>

<script type="text/javascript">
<!--
(function(){
var video = document.querySelector('div#video video');
var span1 = document.querySelector('div#video > div');
span1.innerHTML = '';
if (!video.textTracks) return;

var track = video.textTracks[0];
track.mode = 'hidden';
var idx = 0;

track.oncuechange = function(e) {
  var cue = this.activeCues[0];
  if (cue) {
    if (idx >= 0) {
      span1.classList.remove('on');
      span1.innerHTML = '';
      span1.appendChild(cue.getCueAsHTML());
      span1.classList.add('on');
    }
    idx = ++idx % 2;
  }
};
})();
//-->
</script>

</body>
</html>

(2) 完整解决方案 - 产生与 Sam Dutton 页面上相同的结果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<style type="text/css">
<!--
video {max-width: 100%; outline: none;}

div#video video {margin: 0;}
div#video {text-align: center;}

div#video > div {
margin-top: 2em;
text-align: center;
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
-moz-perspective: 800;
-moz-transform-style: preserve-3d;
-ms-perspective: 800;
-ms-transform-style: preserve-3d;
-o-perspective: 800;
-o-transform-style: preserve-3d;
}

div#video > div > div:last-child {position:relative; top:-36px;} /* position subtitle below video */

div#video > div > div {
color: black;
font-family: "Open Sans", sans-serif;
font-size: 18px;
height:  25px;
opacity: 1;
-webkit-transition: all 500ms ease-in-out;
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg);
-moz-transition: all 500ms ease-in-out;
-moz-transform-origin: 50% 100%;
-moz-transform: rotateX(-90deg);
-o-transition: all 500ms ease-in-out;
-o-transform-origin: 50% 100%;
-o-transform: rotateX(-90deg);
-ms-transition: all 500ms ease-in-out;
-ms-transform-origin: 50% 100%;
-ms-transform: rotateX(-90deg);
}

div#video > div > div.on {
opacity: 1;
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-o-transform: rotateX(0);
-ms-transform: rotateX(0);
}

.trackNotSupported {display: none;}
.trackNotSupported.show {display: block;}
.warningMessage {color: red;
}

//-->
</style>

</head>
<body>

<div id="video">
  <video width="400px" controls>
    <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
    <track label="English subtitles" kind="subtitles" srclang="en" src="subtitles.vtt" default>
  </video>
  <div><div>subtitle line 1</div><div>subtitle line 2</div></div>
</div>

<script type="text/javascript">
<!--
(function(){
var video = document.querySelector('div#video video');
var span1 = document.querySelector('div#video > div :first-child');
var span2 = document.querySelector('div#video > div :last-of-type');

if (!video.textTracks) return;

var track = video.textTracks[0];
track.mode = 'hidden';
var idx = 0;

track.oncuechange = function(e) {
  var cue = this.activeCues[0];
  if (cue) {
    if (idx == 0) {
      span2.className = '';
      span1.classList.remove('on');
      span1.innerHTML = '';
      span1.appendChild(cue.getCueAsHTML());
      span1.classList.add('on');
    } else {
      span1.className = '';
      span2.classList.remove('on');
      span2.innerHTML = '';
      span2.appendChild(cue.getCueAsHTML());
      span2.classList.add('on');
    }
    idx = ++idx % 2;
  }
};
})();
//-->
</script>

</body>
</html>

推荐阅读