video.js fullscreen in Blackboard will not work

Question

I've tried everything in my power to get a video to fullscreen in Blackboard but nothing works. This only is a problem when the video.js script is loaded. If using the generic HTML5 video, it will work. My error: Uncaught TypeError: Cannot call method 'webkitEnterFullScreen' of undefined

Stack trace (I'm using video-js markers plugin as well):

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.

The code:

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

Library loading (right before the </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>

Note: If I open the page locally or on a seperate page, it works 100%. I'm guessing it's a DOM issue or interference with Blackboards libraries. Is there a way to kind of override blackboards libraries with my own?

For those who don't know, Blackboard loads pages through an iFrame which is part of the issue I assume. Again, this works 100% on its own page, just not on Blackboard.

score 0 · Answer 1 · answered Aug 20 '14 at 11:07

You can only make this work if you develop your content/service as a building block or a web service using the Blackboard API. I do not think there is a way to render anything inside Blackboard without using the Blackboard libraries. One way is to create a mashup tool which will allow you to play videos and maximize the player easily. I've seen the Sharestream folks creating such a video player tool and it works nicely windowed or in full screen mode.

video.js fullscreen in Blackboard will not work

1 Answers1