利用轨道元素

<body> 
<video width="500" height="375" controls class="playr_video"> 
    <source type="video/mp4" src="testvideo.mp4" /> 
    <track kind="subtitles" src="testvideo.vtt" srclang="en" /> 
</video> 
</body> 
</html>

我有这个工作，但字幕有一个黑色的背景需要帮助的HTML5造型字幕，我想删除，使字幕有没有任何背景的小黑色轮廓。任何帮助表示赞赏，谢谢！利用轨道元素

来源

2016-12-24 Kastel

的可能的复制（http://stackoverflow.com /问题/ 32252337/how-to-style-text-tracks-in-html5-video-via-css） –

我正在寻找特定的帮助来移除背景并放置一个大纲。 – Kastel

：enter link description here

唯一的跨浏览器的解决方案，我已经找到了日期为：隐藏视频的文本跟踪和使用你自己的。

这将允许您创建自己的文本节点，类，id等，然后可以通过简单的CSS样式。

为了做到这一点，您可以利用文本提示中的onenter和onexit方法来实现自己的文本节点。

var video = document.querySelector(‘YOUR_VIDEO_SELECTOR’) 
    tracks = video.textTracks[0], 
    tracks.mode = 'hidden', // must occur before cues is retrieved 
    cues = tracks.cues; 

    var replaceText = function(text) { 
     $('WHERE_TEXT_GETS_INSERTED').html(text); 
     }, 

     showText = function() { 
     $('WHERE_TEXT_GETS_INSERTED').show(); 
     }, 

     hideText = function() { 
     $('WHERE_TEXT_GETS_INSERTED').hide(); 
     }, 

     cueEnter = function() { 
     replaceText(this.text); 
     showText(); 
     }, 

     cueExit = function() { 
     hideText(); 
     }, 

     videoLoaded = function(e) { 
     for (var i in cues) { 
      var cue = cues[i]; 
      cue.onenter = cueEnter; 
      cue.onexit = cueExit; 
     } 
     }, 

     playVideo = function(e) { 
     video.play(); 
     }; 


    video.addEventListener('loadedmetadata', videoLoaded); 
    video.addEventLister('load', playVideo); 
    video.load();

来源

2017-07-13 17:48:28

不知道这是假设该元素作为这里所说的目标进行跟踪**

.{ 
color: rgba(0,0,0,0) !important; 
-webkit-text-fill-color: white; /* Will override color (regardless of order) */ 
    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: black; 
}

来源

2016-12-24 21:52:26 Fabian

我究竟在哪里放置它？ – Kastel

可以将它放入代码中吗？ – Kastel

http://plnkr.co/edit/EeKfDMtJN2LlExBZF9rq?p=preview – Fabian

我着手将我的标题设置为黑色背景，并置于Safari和Chrome视频的下方。以下代码与以下样式编辑.vtt文件相结合取得了成功。请注意，您必须将样式添加到.vtt文件，否则在Safari你的标题会跳舞，当视频控件（即使他们是隐藏的）会出现：Chrome和Safari的字幕

4 
00:00:09.980 --> 00:00:12.640 line:13 position:50% align:middle 
size:100% 
for just the summer but I ended up staying here.

样式：

Chrome使用video :: cue background-color和opacity。

video::cue { 
    opacity: 1; 
    background-color: black; 
    font-size: 20px !important; 
}

Safari使用-webkit-media-text-track-display-backdrop作为背景颜色。注意！重要的是覆盖Safari的固有样式。

video::-webkit-media-text-track-display-backdrop { 
    background-color: black !important; 
    overflow: visible !important; 
}

以下WebKit的媒体文本轨道显示溢出的是让更多的填充围绕Chrome浏览器的标题文字：

video::-webkit-media-text-track-display { 
    overflow: visible !important; 
}

溢出可见的是Safari浏览器下面的代码很重要，我设置与转换的视频，这是对一个固定的字体大小依赖下面的标题：？如何通过CSS样式HTML5视频文本轨道]

video::-webkit-media-text-track-container { 
overflow: visible !important; 
transform: translateY(30%) !important; 
}

来源

2018-02-06 22:00:22 Kieran

利用轨道元素

回答

相关问题