Brightcove视频无法响应移动设备上的方向变化

时间：2014-08-09 17:55:49

标签： javascript video brightcove

我的网站上有一个brightcove视频。我的网站是响应式的，因此我希望玩家也应该做出回应。现在，我已经浏览了关于视频播放器的响应大小调整的Brightcove文档＆＃39;。这是链接： http://docs.brightcove.com/en/video-cloud/smart-player-api/samples/responsive-sizing.html

但是，它对我的​​视频无效。我还在我的网站上创建了一个测试页面，我在其中复制粘贴了他们的示例代码，但即使这样也失败了。当我在移动设备上打开他们的示例页面时，一切正常。但是我的网站上的相同代码失败了。

此外，我怀疑 onTemplateLoad 和 onTemplateReady 事件不会触发，因为我收到错误说＆＃34; experienceModule 未定义＆ ＃34;在窗口调整大小。

我提供以下示例代码：

<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>

我真的很茫然，任何帮助都会受到赞赏！

6 个答案:

答案 0 :(得分：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)
                    }
                })
            }
        }
    }
}())

答案 1 :(得分：0)

我相信我遇到了同样的问题。 Brightcove的例子在我的桌面浏览器上运行得很好，但是一旦我开始在iOS和Android上进行测试，我看到预览窗口（带有大的＆＃39;三角形图标）不会调整大小将屏幕从纵向旋转到横向，反之亦然。我提出的解决方案不是真正的响应，但它确实调整了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>

答案 2 :(得分：0)

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

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

答案 3 :(得分：0)

您的网站有哪些doctype？似乎<!DOCTYPE html>的HTML5文档类型比其他文档更好。此外，如果您设置的任何viewport元标记可能会影响比例。

实际上，只需从maximum-scale=1.0,initial-scale=1.0代码帮助中移除<meta name="viewport" ...>即可。

答案 4 :(得分：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();
}

答案 5 :(得分：0)

我实现了这里描述的内容，http://docs.brightcove.com/en/video-cloud/smart-player-api/samples/responsive-sizing.html，＆＃34; HTML模式＆＃34;部分并成功。简而言之，Brightcove基于html5的播放器本身并没有响应，我们将不得不添加我们自己的js代码来利用Brightcove API setSize（）方法使其工作。

相关问题
最新问题