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

【问题标题】：Brightcove video not responsive on orientation change on mobileBrightcove 视频对移动设备上的方向更改没有响应
【发布时间】：2015-08-28 00:15:56
【问题描述】：

我的网站上有一个 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>

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

【问题讨论】：

标签： javascript video brightcove

【解决方案1】：

我遇到了同样的问题，并使用一些仅在 HTML5 体验中使用 resize 事件的 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)
                    }
                })
            }
        }
    }
}())

【讨论】：

【解决方案2】：

我相信我遇到了同样的问题。 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>

CSS

.row_video { 
width:100%;
display:block;
margin:0 auto; }

.row_video:after { 
    clear:both; 
    content:""; 
    display:table; }

.containing-block { 
    width:100%; }
.outer-container { 
    position:relative; 
    padding-bottom:56.25%; 
    height:0; }
.BrightcoveExperience { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; }

@media screen and (max-width: 950px) {
    .row_video { width:650px; } }

@media screen and (max-width: 750px) {
    .row_video { width:450px; } }

@media screen and (max-width: 600px) {
    .row_video { width:320px; } }

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>

【讨论】：

【解决方案3】：

将这些参数添加到最后的对象元素中：

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

【讨论】：

【解决方案4】：

您的网站有什么doctype？似乎<!DOCTYPE html> 的 HTML5 文档类型比其他文档类型执行得更好。此外，如果您设置了任何可能干扰比例的viewport 元标记。

实际上，从<meta name="viewport" ...> 标签中删除maximum-scale=1.0,initial-scale=1.0 似乎会有所帮助。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我在“HTML 模式”部分下实现了这里描述的http://docs.brightcove.com/en/video-cloud/smart-player-api/samples/responsive-sizing.html 并成功了。简而言之，基于 Brightcove html5 的播放器本身不会响应，我们必须添加自己的 js 代码以利用 Brightcove API setSize() 方法使其工作。

【讨论】：