Menu
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 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-settings').html('');
var currentTime = 0;
vjsPlayer.on("seeking", function(event) {
if (currentTime < vjsPlayer.currentTime()) {
vjsPlayer.currentTime(currentTime);
}
});
vjsPlayer.on("seeked", function(event) {
if (currentTime < vjsPlayer.currentTime()) {
vjsPlayer.currentTime(currentTime);
}
});
setInterval(function() {
if (!vjsPlayer.paused()) {
currentTime = vjsPlayer.currentTime();
}
}, 1000);
});
});
}
}
</script>
My web server is Apache2.
Any advice on how to enable the Content-Type video/mp4 (or another way to resolve this error) would be greatly appreciated.
I'm also having trouble with the play/pause functions for the video in Firefox and Microsoft Edge. Please check out those questions if you have any ideas.
963
The same error i faced in my application. after few days of research i found that safari can run only the H264 codec format for the videos . and MP3, AAC for the audio.
check the video format and the server response.
for reference: https://docs.videojs.com/tutorial-troubleshooting.html#problems-when-hosting-media
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
