JW7: Player doesn't load on Lesson Question Review pages

[owenbarritt]

Loads fine on the lesson question pages, but on the review pages javascript error prevents player loading:

Uncaught TypeError: c.setup is not a function

Looking at the page source it looks like the player setup javascript is being added twice with 2 different player IDs (first one doesn't exist, second one matches the player div).

Core media filter plugin seems to work fine, so looks to be an issue with the jwplayer filter.

[kabalin]

Is it on JW7 or JW6?

[owenbarritt]

We're using JW7.

[kabalin]

OK, will try to replicate.

[kabalin]

@owenbarritt just tried to replicate it with a single video on the single Lesson "question page". What do you mean by "review" pages? It seems work for me in both cases, when student view and answer question, ans when teacher is checking the detailed statistics in results report.

[kabalin]

I see, you meant a Lesson option that allows student to review answers? I have tried with two question pages now, each contain the video, and review is enabled. I do not see any problems - video is working during "review" in my case and no errors. I am testing on Moodle 2.9.

[owenbarritt]

Using 2.9 and viewing the site in Chrome.

I've just recreated the issue we had on our site as follows:

• Created a new lesson activity
• Added a question page (multi-choice)
• Inserting a video into the question and adding a couple of answers with responses.

When I preview the page I see the video as shown in this screenshot:

However, when I select an answer and go onto the next page the video doesn't show with the feedback, just the title as shown in this screenshot:

Chrome's console shows a JScript error:

Uncaught TypeError: c.setup is not a function

Which looks to be the player setup code.

Looking at the page source, the filter looks to be being applied and the span tags are there:

<span class="filter_jwplayer_media"><span class="filter_jwplayer_playerblock" style="width: 100%;"><span id="filter_jwplayer_media_random56d070e152ebb2">tastingtech.mp4</span></span></span>

However, looking at the script tags at the bottom of the page, the jscript looks to have been added multiple times with different IDs:

<script type="text/javascript">
//<![CDATA[
require(['core/first'], function() {
;
require.config({ paths: {'jwplayer': 'http://www.wsetonlineclassroom.com/lib/jwplayer/jwplayer'}});
require(["filter_jwplayer/jwplayer"], function(amd) { amd.init("MRuXIgXYEdxEbX1OcfTVWRyTF6HzPGv1XvppfdnOXfU="); });;
require(["filter_jwplayer/jwplayer"], function(amd) { amd.setupPlayer({"playerid":"filter_jwplayer_media_random56d070e152ebb1","setupdata":{"playlist":[{"sources":[{"file":"http:\/\/www.wsetonlineclassroom.com\/pluginfile.php\/218735\/mod_lesson\/page_contents\/804\/tastingtech.mp4"}],"title":"tastingtech.mp4","image":"http:\/\/www.wsetonlineclassroom.com\/pluginfile.php\/1\/filter_jwplayer\/defaultposter\/Ariadne_PosterImage.jpg"}],"width":"100%","aspectratio":"16:9","skin":"bekle","ga":{"idstring":"file","label":"file"}},"logcontext":218735,"logevents":["playAttempt","play","buffer","pause","idle","complete","error","setupError","seek","visualQuality","levelsChanged","audioTrackChanged","captionsChanged"]}); });;
require.config({ paths: {'jwplayer': 'http://www.wsetonlineclassroom.com/lib/jwplayer/jwplayer'}});
require(["filter_jwplayer/jwplayer"], function(amd) { amd.init("MRuXIgXYEdxEbX1OcfTVWRyTF6HzPGv1XvppfdnOXfU="); });;
require.config({ paths: {'jwplayer': 'http://www.wsetonlineclassroom.com/lib/jwplayer/jwplayer'}});
require(["filter_jwplayer/jwplayer"], function(amd) { amd.init("MRuXIgXYEdxEbX1OcfTVWRyTF6HzPGv1XvppfdnOXfU="); });;
require.config({ paths: {'jwplayer': 'http://www.wsetonlineclassroom.com/lib/jwplayer/jwplayer'}});
require(["filter_jwplayer/jwplayer"], function(amd) { amd.init("MRuXIgXYEdxEbX1OcfTVWRyTF6HzPGv1XvppfdnOXfU="); });;
require.config({ paths: {'jwplayer': 'http://www.wsetonlineclassroom.com/lib/jwplayer/jwplayer'}});
require(["filter_jwplayer/jwplayer"], function(amd) { amd.init("MRuXIgXYEdxEbX1OcfTVWRyTF6HzPGv1XvppfdnOXfU="); });;
require.config({ paths: {'jwplayer': 'http://www.wsetonlineclassroom.com/lib/jwplayer/jwplayer'}});
require(["filter_jwplayer/jwplayer"], function(amd) { amd.init("MRuXIgXYEdxEbX1OcfTVWRyTF6HzPGv1XvppfdnOXfU="); });;
require(["filter_jwplayer/jwplayer"], function(amd) { amd.setupPlayer({"playerid":"filter_jwplayer_media_random56d070e152ebb2","setupdata":{"playlist":[{"sources":[{"file":"http:\/\/www.wsetonlineclassroom.com\/pluginfile.php\/218735\/mod_lesson\/page_contents\/804\/tastingtech.mp4"}],"title":"tastingtech.mp4","image":"http:\/\/www.wsetonlineclassroom.com\/pluginfile.php\/1\/filter_jwplayer\/defaultposter\/Ariadne_PosterImage.jpg"}],"width":"100%","aspectratio":"16:9","skin":"bekle","ga":{"idstring":"file","label":"file"}},"logcontext":218735,"logevents":["playAttempt","play","buffer","pause","idle","complete","error","setupError","seek","visualQuality","levelsChanged","audioTrackChanged","captionsChanged"]}); });;
require.config({ paths: {'jwplayer': 'http://www.wsetonlineclassroom.com/lib/jwplayer/jwplayer'}});
require(["filter_jwplayer/jwplayer"], function(amd) { amd.init("MRuXIgXYEdxEbX1OcfTVWRyTF6HzPGv1XvppfdnOXfU="); });;
require.config({ paths: {'jwplayer': 'http://www.wsetonlineclassroom.com/lib/jwplayer/jwplayer'}});
require(["filter_jwplayer/jwplayer"], function(amd) { amd.init("MRuXIgXYEdxEbX1OcfTVWRyTF6HzPGv1XvppfdnOXfU="); });;
require(["core/log"], function(amd) { amd.setConfig({"level":"trace"}); });
});
//]]>
</script>

[kabalin]

OK, managed to replicate. There is a quick fix to check whether playersetup.playerid node exists in DOM before passing it as parameter for player setting up. But would be good to find the reason why it attempts to setup the player twice in JS, but rendering the html just for one player.

diff --git a/filter/jwplayer/amd/src/jwplayer.js b/filter/jwplayer/amd/src/jwplayer.js
index 07e4643..1d86e2f 100644
--- a/filter/jwplayer/amd/src/jwplayer.js
+++ b/filter/jwplayer/amd/src/jwplayer.js
@@ -22,7 +22,7 @@
  * @copyright  2015 Ruslan Kabalin, Lancaster University
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
-define(['jwplayer', 'core/config', 'core/yui', 'core/log'], function(jwplayer, mdlconfig, Y, log) {
+define(['jwplayer', 'jquery', 'core/config', 'core/yui', 'core/log'], function(jwplayer, $, mdlconfig, Y, log) {
     // Private functions and variables.
     /** @var {int} logcontext Moodle page context id. */
     var logcontext = null;
@@ -108,10 +108,14 @@ define(['jwplayer', 'core/config', 'core/yui', 'core/log'], function(jwplayer, m
          *
          * @method init
          * @param {Object[]} playersetup JW Player setup parameters.
+         * @return {void}
          */
         setupPlayer: function (playersetup) {
             //log.debug(playersetup);
             logcontext = playersetup.logcontext;
+            if (!$('#'+playersetup.playerid).length) {
+                return;
+            }
             var playerinstance = jwplayer(playersetup.playerid);
             playerinstance.setup(playersetup.setupdata);

[owenbarritt]

It's interesting that the 2 random IDs are so similar.

The uniqid part is exactly the same, just the counter has been incremented, so it looks like they're created at the same time.

[kabalin]

Yep, I noticed that. Need to set backtraces in the php code and see what is going on.

[kabalin]

The issue is caused but double rendering of the page content in mod_lesson revision step. Only the second rendering actually results in content output to the page, while the first one is only used for mform data fetching and never being displayed. That is why we see two JS init calls, but only one player container is present on the page. See MDL-53287 for details.