Brightcove视频对移动设备上的方向变化没有响应
Brightcove video not responsive on orientation change on mobile
我的网站上有一个brightcove视频。我的网站是响应性的,因此我希望玩家也应该响应。现在,我已经浏览了Brightcove关于"视频播放器的响应大小"的文档。链接如下:http://docs.brightcove.com/en/video-cloud/smart-player-api/samples/responsive-sizing.html
然而,它对我的视频不起作用。我还在我的网站上创建了一个测试页面,我复制粘贴了他们的示例代码,但即使这样也失败了。当我在手机上打开他们的示例页面时,一切都很正常。但同样的代码在我的网站上失败了。
另外,我怀疑onTemplateLoad和onTemplateReady事件不触发,因为我得到一个错误说"experienceModule是未定义"的窗口调整大小。
我提供下面的示例代码:
<style type="text/css">
.containing-block {
width: 75%;
}
.outer-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.BrightcoveExperience {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}</style>
<div class="containing-block" id="container2"><div class="outer-container" id="container1"><!-- Start of Brightcove Player --><div style="display:none"> </div><!--
By use of this code snippet, I agree to the Brightcove Publisher T and C
found at https://accounts.brightcove.com/en/terms-and-conditions/.
-->
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<script src="http://admin.brightcove.com/js/APIModules_all.js"></script>
<object class="BrightcoveExperience" id="myExperience1754276221001">
<param name="includeAPI" value="true" /><param name="templateLoadHandler" value="onTemplateLoaded" /><param name="templateReadyHandler" value="onTemplateReady" /><param name="bgcolor" value="#FFFFFF" /><param name="width" value="480" /><param name="height" value="270" /><param name="playerID" value="1785957921001" /><param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisrdzE4WB9lhVzM13pYBWmmbj" /><param name="isVid" value="true" /><param name="isUI" value="true" /><param name="dynamicStreaming" value="true" /><param name="@videoPlayer" value="1754276221001" /></object><script src="//docs.brightcove.com/en/scripts/https-fix.js"></script><script type="text/javascript">brightcove.createExperiences();</script></div></div>
<script type="text/javascript">
var player,
APIModules,
videoPlayer,
experienceModule;
function onTemplateLoaded(experienceID){
console.log("EVENT: onTemplateLoad");
player = brightcove.api.getExperience(experienceID);
APIModules = brightcove.api.modules.APIModules;
}
function onTemplateReady(evt){
console.log("EVENT.onTemplateReady");
videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);
experienceModule = player.getModule(APIModules.EXPERIENCE);
videoPlayer.play();
videoPlayer.getCurrentRendition( function (renditionDTO) {
var newPercentage = ( renditionDTO.frameHeight / renditionDTO.frameWidth ) * 100;
newPercentage = newPercentage + "%";
console.log("Video Width = "+renditionDTO.frameWidth+" and Height = "+renditionDTO.frameHeight);
console.log("New Percentage = "+newPercentage);
document.getElementById("container1").style.paddingBottom = newPercentage;
});
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize',true,false,0);
window.dispatchEvent(evt);
videoPlayer.play();
}
function calulateNewPercentage(width,height) {
logit("function", "calulateNewPercentage");
var newPercentage = ((height / width) * 100) + "%";
logit("Video Width = ", width);
logit("Video Height = ", height);
logit("New Percentage = ", newPercentage);
document.getElementById("container1").style.paddingBottom = newPercentage;
}
window.onresize = function(evt) {
var $=jQuery;
var resizeWidth = $(".BrightcoveExperience").width(),
resizeHeight = $(".BrightcoveExperience").height();
if (experienceModule.experience.type == "html"){
experienceModule.setSize(resizeWidth, resizeHeight)
//logit("html mode: ", "call setSize method to resize player");
}
}
</script>
我真的很困惑,任何帮助都会很感激!
我遇到了同样的问题,并使用一些Javascript来解决它,这些Javascript只在HTML5体验中使用resize事件。
foo = (function() {
var players = []
return {
onTemplateLoad: function(id) {
players.push(id);
},
onTemplateReady: function(event) {
var player = brightcove.api.getExperience(event.target.experience.id);
var videoPlayer = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
var experienceModule = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
if (experienceModule.experience.type == "html") {
window.addEventListener("resize", function(event) {
for (var i = 0; i < players.length; i++) {
var resizeWrapper = $('.js-video-container');
var resizeWidth = resizeWrapper.innerWidth();
var resizeHeight = resizeWrapper.innerHeight();
experienceModule.setSize(resizeWidth, resizeHeight)
}
})
}
}
}
}())
我相信我也遇到了同样的问题。Brightcove的例子在桌面浏览器上运行得很好,但当我开始在iOS和Android上进行测试时,我发现当我将屏幕从纵向旋转到横向时,预览窗口(带有大的"播放"三角形图标)无法调整大小。我想出的解决方案并不是真正的响应,但它确实根据屏幕宽度调整了iOS和Android的预览窗口大小。它基本上涉及很多媒体查询!
下面是包含所有CSS和JS的两个视频示例: