javascript - Brightcove 视频对移动设备上的方向变化没有响应

Question

我的网站上有一个 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">&nbsp;</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>

我真的很茫然，任何帮助将不胜感激!

Answer 1

我遇到了同样的问题，并使用一些仅在 HTML5 体验中使用调整大小事件的 Javascript 解决了该问题。

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)
                    }
                })
            }
        }
    }
}())