Javascript Brightcove视频对移动设备上的方向更改没有响应

我的网站上有一个brightcove视频。我的网站是有反应的，因此我希望玩家也应该有反应。现在，我已经阅读了Brightcove关于“视频播放器响应性尺寸”的文档。以下是链接：

但是，它不适用于我的视频。我还在我的网站上创建了一个测试页面，在那里我复制粘贴了他们的示例代码，但即使这样也失败了。当我在手机上打开他们的示例页面时，一切正常。但同样的代码在我的网站上失败了

此外，我怀疑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>

.包含块{
宽度：75%；
}
.外容器{
位置：相对位置；
身高：0；
垫底：56.25%；
}
.Brightcove经验{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
brightcove.createExperiences（）；
var player，
API模块，
视频播放器，
经验模块；
函数onTemplateLoaded（experienceID）{
log（“事件：onTemplateLoad”）；
player=brightcove.api.getExperience（experienceID）；
APIModules=brightcove.api.modules.APIModules；
}
功能onTemplateReady（evt）{
console.log（“EVENT.onTemplateReady”）；
videoPlayer=player.getModule（APIModules.VIDEO\u player）；
experienceModule=player.getModule（APIModules.EXPERIENCE）；
视频播放器；
videoPlayer.getCurrentRendition（函数（renditionDTO）{
var newPercentage=（renditionDTO.frameHeight/renditionDTO.frameWidth）*100；
newPercentage=newPercentage+“%”；
console.log（“视频宽度=“+renditionDTO.frameWidth+”和高度=“+renditionDTO.frameHeight”）；
console.log（“New Percentage=“+newPercentage”）；
document.getElementById（“container1”）.style.paddingBottom=newPercentage；
});
var evt=document.createEvent（'UIEvents'）；
evt.initUIEvent（'resize'，true，false，0）；
窗口调度事件（evt）；
视频播放器；
}
功能计算百分比（宽度、高度）{
logit（“函数”、“计算百分比”）；
var newPercentage=（（高度/宽度）*100）+“%”；
logit（“视频宽度=”，宽度）；
logit（“视频高度=”，高度）；
logit（“新百分比=”，新百分比）；
document.getElementById（“container1”）.style.paddingBottom=newPercentage；
}
window.onresize=函数（evt）{
var$=jQuery；
var resizeWidth=$（“.BrightcoveExperience”）.width（），
resizeHeight=$（“.BrightcoveExperience”）.height（）；
if（experienceModule.experience.type==“html”）{
experienceModule.setSize（调整宽度、调整高度）
//logit（“html模式：”，“调用setSize方法调整播放器大小”）；
}
}

---

我真是不知所措，任何帮助都将不胜感激

我想我也遇到了同样的问题。Brightcove的例子在桌面浏览器上运行良好，但当我开始在iOS和Android上测试时，我发现当我将屏幕从纵向旋转到横向时，预览窗口（带有大的“播放”三角形图标）不会调整大小，反之亦然。我提出的解决方案没有真正的响应能力，但它确实可以根据屏幕宽度在iOS和Android中调整预览窗口的大小。它基本上涉及很多媒体查询

以下是包含所有CSS和JS的两个视频示例：

HTML

<div class="row_video">
    <div class="containing-block">
        <div class="outer-container">
            <div class="video_1"></div> 
        </div>
    </div>
</div>

<div class="row_video" style="margin-top:50px;">
     <div class="containing-block">
        <div class="outer-container">
            <div class="video_2"></div> 
        </div>
    </div>
</div>

JS-为了进行此测试，请将这些内容粘贴到HTML的底部

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
    brightcove.createExperiences();
</script>
  <script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

<script>
    $(".video_1").html('<object id="myExperience1754276206001" class="BrightcoveExperience"><param name="bgcolor" value="#FFFFFF" /><param name="width" value="480" /><param name="height" value="270" /><param name="playerID" value="1753810340001" /><param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisrdihurn3hYnYJWo8k_gM6uF" /><param name="isVid" value="true" /><param name="isUI" value="true" /><param name="dynamicStreaming" value="true" /><param name="@videoPlayer" value="1754276206001" /></object>');
</script>

<script>
    $(".video_2").html('<object id="myExperience1754276205001" class="BrightcoveExperience"><param name="bgcolor" value="#FFFFFF" /><param name="width" value="480" /><param name="height" value="270" /><param name="playerID" value="1756040703001" /><param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisrc05QYSNxkzqM1X9GtvaqWM" /><param name="isVid" value="true" /><param name="isUI" value="true" /><param name="dynamicStreaming" value="true" /><param name="@videoPlayer" value="1754276205001" /></object>');
</script>

brightcove.createExperiences（）；
$（“.video_1”）.html（“”）；
$（“.video_2”）.html（“”）；

我遇到了同样的问题，并用一些只在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)
                    }
                })
            }
        }
    }
}())

foo=（函数（）{
var玩家=[]
返回{
onTemplateLoad:函数（id）{
球员。推（id）；
},
onTemplateReady:函数（事件）{
var player=brightcove.api.getExperience（event.target.experience.id）；
var videoPlayer=player.getModule（brightcove.api.modules.apimules.VIDEO\u播放器）；
var experienceModule=player.getModule（brightcove.api.modules.apimules.EXPERIENCE）；
if（experienceModule.experience.type==“html”）{
window.addEventListener（“调整大小”），函数（事件）{
对于（变量i=0；i

将这些参数添加到末尾的对象元素中：

<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="onTemplateLoaded" />
<param name="templateLoadHandler" value="onTemplateLoad" />
<param name="templateReadyHandler" value="onTemplateReady" />

---

你的网站有什么

doctype

？看来HTML5 doctype的

性能比其他的要好。此外，如果您设置了任何可能干扰缩放的

视口
元标记

实际上，它看起来只是从
标记帮助中删除
最大比例=1.0，初始比例=1.0
。
尝试javascript解决方案

var $video =  $(".vjs")[0];

function videoJsReady() {
    var player = this;

    var _resize = function() {
        var ratio = 967/486; // your video aspect ratio
        var width = $(window).width();
        var height = width / ratio;
        $($video).css('width', width);
        $($video).css('height', height);
    };

    $(window).on('orientationchange', function(){
        _resize();
    });

    _resize();
}


我在“HTML模式”部分实现了这里描述的内容并成功了。简而言之，基于Brightcove html5的播放器本身并没有响应能力，我们必须添加自己的js代码，以利用Brightcove API setSize（）方法使其工作

var $video =  $(".vjs")[0];

function videoJsReady() {
    var player = this;

    var _resize = function() {
        var ratio = 967/486; // your video aspect ratio
        var width = $(window).width();
        var height = width / ratio;
        $($video).css('width', width);
        $($video).css('height', height);
    };

    $(window).on('orientationchange', function(){
        _resize();
    });

    _resize();
}