У меня есть простой видеоблок HTML 5, в котором пользователь может воспроизвести следующее видео или предыдущее видео, нажав предоставленные кнопки prev и next.
Вот что у меня есть:
HTML
<div id="video-container">
<h1 class="movie-title">Movie title</h1>
<video class="videoplayer" id="video-player_transformed" playsinline autoplay muted="muted"></video>
</div>
JS
(function($) {
"use strict";
/**
* Ajax response data will be stored in this local variable
* @var {Array}
*/
var myData = [];
/**
* jQuery video element
* @var {Object}
*/
var $player = $("video#videoplayer");
/**
* jQuery movie title element
* @var {Object}
*/
var $title = $(".movie-title");
/**
* jQuery previous button element
* @var {Object}
*/
var $prev = $(".prev");
/**
* jQuery next button element
* @var {Object}
*/
var $next = $(".next");
/**
* Custom jQuery function to add sources to a media element
* @param {Array|String} sources
*/
$.fn.setSource = function(sources) {
// Get the media tag (video/audio)
var tag = this.prop("tagName").toLowerCase();
// Clear any existing sources
this.empty();
// Check if sources paramater is an array
if (Array.isArray(sources)) {
// Loop through each source
for (let i = 0; i < sources.length; i++) {
var src = sources[i];
var type = /(?:\.([^.]+))?$/.exec(src); // Get file extention (.mp4, .ogv, .webm etc)
if (type[0]) {
type = type[0].replace(".", "");
}
// Create and append a source tag
this.append(
$("<source>", {
src: src,
type: tag + "/" + type
})
);
}
} else {
this.attr("src", sources);
}
};
/**
* Reusable function to update player element
* @param {Object} data Expects an object with `link` and `title` attributes
*/
function updatePlayer(data) {
$player.setSource(data.link); // Set the video source
$title.text(data.title); // Add the title
}
// Disable actions because we have no data
$prev.prop("disabled", true);
$next.prop("disabled", true);
// Send request to server to recieve data
$.ajax({
dataType: "json",
url: "http://localhost:8080/videoexplainer/data/video.json,"
})
.then(function(data) {
myData = data; // replace `myData` with the ajax response data
// Check if we have data
if (myData && myData.length) {
// Re-enable actions because we have data
$prev.prop("disabled", false);
$next.prop("disabled", false);
updatePlayer(data); // Set the video source (see functions above)
$player.get(0).play(); // Play the html5 video*
// *Most browsers will not allow playing without any user interaction
}
})
.fail(function(error) {
// Request failed, inform user
alert(
"There was an error downloading videos, please refresh and try again."
);
console.warn(error);
});
// On click set video element to PREVIOUS video in myData
$prev.on("click", function() {
// Check if we have data before attempting to access it
if (myData && myData.length) {
updatePlayer(myData[i === 0 ? myData.length - 1 : --i]);
$player.get(0).play();
}
// Prevent default click action
return false;
});
// On click set video element to NEXT video in myData
$next.on("click", function() {
// Check if we have data before attempting to access it
if (myData && myData.length) {
updatePlayer(myData[i === myData.length - 1 ? 0 : ++i]);
$player.get(0).play();
}
// Prevent default click action
return false;
});
})(jQuery || window.jQuery);
Когда я запускаю свое приложение, к сожалению, я получаю следующие две ошибки:
- В качестве предупреждения яполучить следующее предупреждение:
There was an error downloading videos, please refresh and try again.
Что такоене так с этим кодом?