Blackboard 中的 video.js 全屏将不起作用答案

【问题标题】：video.js fullscreen in Blackboard will not workBlackboard 中的 video.js 全屏将不起作用
【发布时间】：2014-03-12 13:42:14
【问题描述】：

我已尽我所能在 Blackboard 中将视频全屏显示，但没有任何效果。这仅在加载 video.js 脚本时才会出现问题。如果使用通用的 HTML5 视频，它将起作用。我的错误：未捕获的类型错误：无法调用未定义的方法“webkitEnterFullScreen”

堆栈跟踪（我也在使用 video-js 标记插件）：

vent.returnValue is deprecated. Please use the standard event.preventDefault() instead.
[videojs-markers] Initialize videojs.markers.js:113
[videojs-markers] creating markers videojs.markers.js:44
[videojs-markers] markers videojs.markers.js:115
Array[8]
0: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
length: 8
__proto__: Array[0]
 videojs.markers.js:116
[videojs-markers] creating marker tip videojs.markers.js:61
Uncaught TypeError: Cannot call method 'webkitEnterFullScreen' of undefined L1P04.PracticesProcedures.html:188
'KeyboardEvent.keyLocation'' is deprecated. Please use 'KeyboardEvent.location' instead.

代码：

<video id="dd_movie" class="video-js vjs-default-skin " controls width="640" height="480" poster="../../../../Media/Videos/U07L1P04_PracticeAndProcedures.jpg" preload="auto" data-setup="{}" allowFullScreen>    
                <source src="../../../../Media/Videos/U07L1P04_PracticeAndProcedures.mp4" type='video/mp4'>
                <source src="../../../../Media/Videos/U07L1P04_PracticeAndProcedures.webm" type='video/webm'>
                <source src="../../../../Media/Videos/U07L1P04_PracticeAndProcedures.ogv" type="video/ogv">
                <track kind="captions" src="../../../../Media/Videos/U07L1P04_PracticeAndProcedures.vtt" srclang="en" label="English" />
            </video>

库加载（就在</html> 之前）：

<script src="../../../js/libs/video-js/video.js"></script>

  <script>
    videojs.options.flash.swf = "../../../js/libs/video-js/video-js.swf";
  </script>
  <!-- end: video -->



    <!-- begin: video-js markers plugin -->
    <script src="../../../js/libs/video-js/markers/videojs.markers.js"></script>

  <script>
     // initialize video.js
     var video = videojs('dd_movie');

     //load the marker plugin
     video.markers({
        setting: {
           markerTip:{
              default_text: ""
           },
           breakOverlay:{
              display: false
           }
        },
        //set break time
        marker_breaks:[8.5, 47, 66, 88, 112, 138, 183,204],
        marker_text:["Open Files","Image Properties","Zoom Level","Navigation Tools","Copy & Paste","Layers","Save Files","Quit GIMP"]
     });


  $(window).load(function(){
    $('.vjs-fullscreen-control').on('click',function(){
        $(".dd_movie")[0].webkitEnterFullScreen();
        console.log('okay...'); 
    });
});
  </script>

注意：如果我在本地或单独的页面上打开页面，它可以 100% 工作。我猜这是 DOM 问题或对 Blackboards 库的干扰。有没有办法用我自己的覆盖黑板库？

对于那些不知道的人，Blackboard 通过 iFrame 加载页面，这是我假设的问题的一部分。同样，这在其自己的页面上 100% 有效，而不是在 Blackboard 上。

【问题讨论】：

标签： jquery iframe html5-video video.js blackboard

【解决方案1】：

只有当您使用 Blackboard API 将内容/服务开发为构建块或 Web 服务时，您才能完成这项工作。我认为没有办法在不使用 Blackboard 库的情况下在 Blackboard 中呈现任何内容。一种方法是创建一个混搭工具，它可以让您轻松播放视频并最大化播放器。我看到 Sharestream 的人创建了这样一个视频播放器工具，它可以在窗口或全屏模式下很好地工作。

【讨论】：