LMSouq
moodle-core Open

Video.js not working in Safari (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)

TI
tinezekis
1 month ago
3 views
Problem Description
I am trying to use video.js to prevent fast-forward, but allow rewind, for mp4 videos on a Moodle site. It is working properly in Chrome and Opera, but when I try in Safari, I get the following error message: VIDEOJS: (4) "ERROR:" "(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)" "The media could not be loaded, either because the server or network failed or because the format is not supported." I have seen a [suggestion][1] to change the Content-Type header to mp4, but for some reason, my `iframe` doesn't generate a `head` tag at all (only in Safari; in all other browsers, the `iframe` contains an `html` tag with both `head` and `body`). Also, it turns out, I am blocked from prepending a `head` tag to the `iframe html`. I tried throwing it into a `meta` tag instead, but this had no impact on the error message The following is the script I'm using to prevent fast-forward: <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link href="https://vjs.zencdn.net/5.0/video-js.min.css" rel="stylesheet"> <script src="https://vjs.zencdn.net/5.0/video.min.js"></script> <script> window.onload = function() { if ($('iframe').length > 0) { $('iframe').ready(function() { if ($('iframe').contents().find('head').length === 0) { console.log("*********************"); console.log("In the if!"); $('iframe').contents().find('html').prepend("<head><meta name='viewport' content='width=device-width' content-type='video/mp4'></head>"); $('iframe').contents().find('html').attr("content-type", "video/mp4"); console.log($('iframe').contents().find('head')); console.log($('iframe').contents().find('html')); } var videoPlayer = $('iframe').contents().find('video')[0]; var cssLink = document.createElement("link") cssLink.href = "https://vjs.zencdn.net/5.0/video-js.min.css"; cssLink.rel = "stylesheet"; cssLink.type = "text/css"; $('iframe').contents().find('head').append(cssLink); videojs(videoPlayer, {}, function() { var vjsPlayer = this; $('iframe').contents().find('video').prop('controls', 'true'); $('iframe').contents().find('div .vjs-big-play-button').html(''); $('iframe').contents().find('div .vjs-control-bar').html(''); $('iframe').contents().find('div .vjs-caption...

AI-Generated Solution

Powered by LMSouq AI · GPT-4.1-mini

✓ Solution Ready
Analyzing problem and generating solution…
Was this solution helpful?
Back to Knowledge Base