问题描述
我有一个视频作为横幅播放,使用 javascript。我需要添加字幕轨道,但仅将字幕代码添加到视频部分是行不通的。我试过了..
-
我在视频标签中添加了
<track label="English" kind="subtitles" srclang="en" src="/media/Images/Home2018/Banner/BannerVideo3.vtt">
默认值,但这不起作用。
我认为需要以某种方式更新 JS 以包含字幕轨道。
我下面是我的代码:
<video id="BannerVideo3" class="Banner" muted playsinline loop oncanplaythrough="playBannerVideo3()" controls autoplay muted playsinline>
</video>
<script>
function playBannerVideo3()
{
var videoElement = document.getElementById('BannerVideo3');
try
{
videoElement.play();
}
catch(err) {}
}
var basePosterURL = '/media/Images/Home2018/Banner/BannerVideo3.jpg';
var baseVideoURL = '/media/Images/Home2018/Banner/BannerVideo3.mp4';
function getNameForCurrentWidth()
{
var bodyWidth = document.body.clientWidth; // $('body').width();
if (bodyWidth <= 767)
return '_Phone';
if (bodyWidth <= 990)
return '_Tablet';
return ''; // Desktop
}
var loadedWidthName;
function loadBannerVideo3(posterOnly)
{
var newWidthName = getNameForCurrentWidth();
if(newWidthName == loadedWidthName)
return;
loadedWidthName = newWidthName;
var videoElement = document.getElementById('BannerVideo3');
if (!videoElement.paused)
videoElement.pause();
videoElement.src = '';
videoElement.poster = addToFilename(basePosterURL,loadedWidthName);
if (posterOnly == true)
return;
setBannerVideoSrc(loadedWidthName);
}
function setBannerVideo3Src(newWidthName)
{
// don't play video if in design or edit modes
if( $('body.DesignMode').length == 1 || $('body.EditMode').length == 1)
return;
var videoElement = document.getElementById('BannerVideo3');
videoElement.src = addToFilename(baseVideoURL,newWidthName);
videoElement.load();
}
// load poster as soon as possible
$(function() // document.ready
{
loadBannerVideo3(true);
});
// load and play video after everything else loads
$(window).on('load',function()
{
setBannerVideo3Src(loadedWidthName);
});
var resizeTimeout;
$(window).resize(function()
{
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(resizeEnd,200);
});
function resizeEnd()
{
loadBannerVideo();
}
</script>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)