Javascript 视频在Opera中播放,但皮肤不是选项中定义的(并且它在Firefox中不播放)
我正在开发一个带有弹出窗口的页面,以显示选定的视频。 我使用引导,视频显示在模式对话框中 问题是,即使我将皮肤定义为vjs tech(或默认的视频js vjs默认皮肤),显示的皮肤也是白色的。 在Firefox中,显示皮肤,但浏览器不播放视频 视频是h264格式,音频是aac格式(它是一个流) 模式弹出窗口的网页代码为:Javascript 视频在Opera中播放,但皮肤不是选项中定义的(并且它在Firefox中不播放),javascript,video.js,dynamically-generated,Javascript,Video.js,Dynamically Generated,我正在开发一个带有弹出窗口的页面,以显示选定的视频。 我使用引导,视频显示在模式对话框中 问题是,即使我将皮肤定义为vjs tech(或默认的视频js vjs默认皮肤),显示的皮肤也是白色的。 在Firefox中,显示皮肤,但浏览器不播放视频 视频是h264格式,音频是aac格式(它是一个流) 模式弹出窗口的网页代码为: <div class="modal fade" id="myModalAstraPlayer" tabindex="-1
<div class="modal fade" id="myModalAstraPlayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog videocenter" id="videocontainer">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div style="width:560px; height:340px;" id="videoplayer">
</div>
</div>
</div>
</div>
</div>
任何人都可以提供一些示例代码或有关问题的线索
Opera弹出窗口:Firefox弹出窗口:
包含“视频”标记的html在哪里?它是由video=document.createElement(“视频”)动态生成的;然后填充了和videojs相关的元素。啊,是的。我现在看到了。因此,我的想法是,在class属性中需要一个额外的标记。尝试包含一个“video js”标记。[在我的工作示例中,我的class属性有2个标记:class=“video js vjs default skin”标记由“space”字符分隔。]
var video;
var videoaddress = document.getElementById("videoaddress").value;
channelname = row.output;
var n = channelname.lastIndexOf('/');
var result = channelname.substring(n + 1);
var videotoshow = videoaddress + "/" + result; // this is the video address...
var mainDiv = document.getElementById('videoplayer');
var divContainer = document.createElement('div');
divContainer.class = 'example-video-container';
divContainer.style.display = 'inline-block';
divContainer.id = "videodiv";
mainDiv.appendChild(divContainer);
// Create Video Player
video = document.createElement('video');
video.id = 'vid2';
video.width = 560;
video.height = 315;
video.autoplay = true;
video.controls = true;
video.muted = false;
video.preload = 'auto';
video.poster = "../images/loading.jpg";
video.setAttribute("example_option", "true");
video.setAttribute("playbackRates", "[1, 1.5, 2]");
//video.setAttribute("controlspreload", "none");
video.setAttribute("class", "vjs-tech"); //video-js vjs-tech video-js vjs-default-skin");
function addSourceToVideo(element, src, type)
{
var source = document.createElement('source');
source.src = src;
source.type = type;
element.appendChild(source);
}
addSourceToVideo(video, videotoshow, 'video/mp4');
//addSourceToVideo(video, videotoshow, 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
//addSourceToVideo(video, videotoshow, 'video/mp4; codecs="avc1.58A01E, mp4a.40.2"');
//addSourceToVideo(video, videotoshow, 'video/mp4; codecs="avc1.4D401E, mp4a.40.2"');
//addSourceToVideo(video, videotoshow, 'video/mp4; codecs="avc1.64001E, mp4a.40.2"');
//addSourceToVideo(video, videotoshow, 'video/mp4; codecs="mp4v.20.8, mp4a.40.2"');
//addSourceToVideo(video, videotoshow, 'video/mp4; codecs="mp4v.20.240, mp4a.40.2"');
//addSourceToVideo(video, videotoshow, 'video/mp2t');
//addSourceToVideo(video, videotoshow, 'video/mpeg');
//addSourceToVideo(video, videotoshow, 'video/msvideo');
//addSourceToVideo(video, videotoshow, 'video/3gpp');
//addSourceToVideo(video, videotoshow, 'video/3gpp2');
//addSourceToVideo(video, videotoshow, 'video/avi');
//addSourceToVideo(video, videotoshow, 'video/mpeg');
//addSourceToVideo(video, videotoshow, 'video/msvideo');
//addSourceToVideo(video, videotoshow, 'video/quicktime');
//addSourceToVideo(video, videotoshow, 'application/octet-stream');
console.log("Video Creation End");
console.log("Paragraph Started");
var paragraph = document.createElement('p');
paragraph.innerHTML = "Video PlayBack Not Supported";
video.appendChild(paragraph);
divContainer.appendChild(video);
$("#div_video_html5_api").show(); // Not necessary?
video.load();
video.play();
$('#myModalAstraPlayer').modal('show');
jQuery('#myModalAstraPlayer').on('shown.bs.modal', function (e)
{
});
jQuery('#myModalAstraPlayer').on('hidden.bs.modal', function (e)
{
video.pause();
videojs(video).dispose();
try
{
document.getElementById("videodiv").remove();
}
catch(err)
{
console.log(err.message);
}
});
var myVideo = document.getElementById("vid2");
// disable right-click over video...
if (myVideo.addEventListener)
{
myVideo.addEventListener('contextmenu', function(e)
{
e.preventDefault();
}, false);
}
else
{
myVideo.attachEvent('oncontextmenu', function()
{
window.event.returnValue = false;
});
}