Question

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

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

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

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

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

下面的图像代表了我要完成的工作。

{@ 3}}是萨姆·达顿（Sam Dutton）的一个视频示例，但他引用的埃里克·比德尔曼（Eric Bidelman）的代码是无效链接。

在示例页面上，萨姆·达顿（Sam Dutton）显示了代码片段，但我可以从中提取任何内容。

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

谢谢。

Example

Answer 1

好吧，我好像在回答自己的问题。

由于在网上搜索可能的解决方案没有结果，所以我回去花了几个小时来制作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>

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

1 个答案: