Я не могу понять, в чем моя проблема в коде,
Я попытался использовать запись BLOB-объектов, используя canvas для записи этого слайдера, и это то, что я пробовал до сих пор, но для каждого файла в цикле for отображается видео-тег
и я попытался взять его из цикла for, но он не будет работать для меня ...
Спасибо заранее за помощь ...
вот ссылка на рабочий пример этого кода
http://dovela -datz.com / JS / слайдер / демо /
$(function ($) {
var slider = window.slider = new Slider($('#demo'));
var filesArr = [];
var newArr = [];
var canvas = null;
var imagesPreview = function (input, element) {
$('#flickr_enabled').on('click', function (e) {
if (input.files) {
for (const file of input.files) {
var filename = file.name;
append(file, filename, element);
}
}
});
};
const append = function (file, filename, element) {
const reader = new FileReader();
$(reader).load(function (e) {
filesArr.push(e.target.result);
newArr = JSON.parse(JSON.stringify(filesArr));
console.log(newArr);
//var files = e.target.files;
var myArray = [];
var file = {};
// manually create a new file obj for each File in the FileList
for (var i = 0; i < newArr.length; i++) {
var source = newArr[i];
file = {
'src': source
}
//add the file obj to your array
myArray.push(file);
}
slider.setPhotos(myArray);
$("#flickr_enabled").html('Finished');
$("#flickr_enabled").attr("disabled", true);
canvas = $("#myCanvas")[0];
function startRecording() {
const chunks = []; // here we will store our recorded media chunks (Blobs)
const stream = canvas.captureStream(); // grab our canvas MediaStream
const rec = new MediaRecorder(stream); // init the recorder
// every time the recorder has new data, we will store it in our array
rec.ondataavailable = e => chunks.push(e.data);
// only when the recorder stops, we construct a complete Blob from all the chunks
rec.onstop = e => exportVid(new Blob(chunks, { type: 'video/webm' }));
rec.start();
setTimeout(() => rec.stop(), newArr.length * 1000 ); // stop recording in 6s
}
function exportVid(blob) {
const vid = document.createElement('video');
vid.src = URL.createObjectURL(blob);
vid.controls = true;
document.body.appendChild(vid);
const a = document.createElement('a');
a.download = 'myvid.webm';
a.href = vid.src;
a.textContent = 'download the video';
document.body.appendChild(a);
}
startRecording();
})
reader.readAsDataURL(file);
}
$('#images').on('change', function (e) {
imagesPreview(this);
});
$('#themes').change(function () {
slider.setTheme($(this).val());
}).change();
$('#transitions').change(function () {
var transition = $(this).val();
if (SliderTransitionFunctions[transition]) {
slider.setTransitionFunction(SliderTransitionFunctions[transition])
}
else {
slider.setTransition('transition-clear');
setTimeout(function () { slider.setTransition(transition) }, 50);
}
}).change();
$('#options').submit(function (e) {
e.preventDefault();
$('#flickr_enabled').click(function () {
//slider.setSize(640, 309);
//slider.setSize(640, 480);
slider.setSize(600, 400);
})
}).submit();
});
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="title" content="Slider.js: Slideshow with jQuery and CSS Transitions - example with Flickr">
<meta name="Description"
content="Slider.js is an easy-to-use customizable Javascript library to create image slideshows. It relies on the power of CSS Transitions to perform awesome and efficient effects. Slider.js can optionally uses HTML5 Canvas to perform some non trivial transitions.">
<meta name="Keywords" content="slider.js slider slideshow javascript jquery css transitions canvas css3 flickr">
<title>Slider To Video</title>
<script type="text/javascript" async="" src="http://api.flattr.com/js/0.6/load.js?mode=auto"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="slider.js"></script>
<link href="slider.min.css" rel="stylesheet" type="text/css">
<!-- demo related resources -->
<script type="text/javascript" src="demo.js"></script>
<link href="demo.min.css" rel="stylesheet" type="text/css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<style type="text/css">
code,
pre {
font-family: monospace;
color: #e6e1dc;
background-color: #222222;
}
.lnr {
color: #cccccc;
background-color: #555555;
}
span.caption {
display: none;
}
.Error {
color: #ffc66d;
background-color: #990000;
}
.htmlItalic {
font-style: italic;
}
.htmlBold {
font-weight: bold;
}
.Underlined {
color: #80a0ff;
text-decoration: underline;
}
.Normal {
color: #e6e1dc;
background-color: #222222;
}
.Constant {
color: #6d9cbe;
}
.Keyword {
color: #cc7833;
}
.Identifier {
color: #6d9cbe;
}
.Function {
color: #ffc66d;
}
.Special {
color: #da4939;
}
.Statement {
color: #cc7833;
}
.xmlEndTag {
color: #e8bf6a;
}
.Title {
color: #ffffff;
font-weight: bold;
}
.String {
color: #a5c261;
}
.Type {
color: #da4939;
}
.PreProc {
color: #e6e1dc;
}
.xmlTagName {
color: #e8bf6a;
}
.xmlTag {
color: #e8bf6a;
}
.Comment {
color: #666666;
font-style: italic;
}
.btn {
padding: 4px;
}
.img {
position: relative;
float: left;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="wrapper">
<section class="slider">
<form id="options">
<fieldset id="slider_options">
<legend>Slider options</legend>
<dl>
<dt>
<label for="transitions">Transition effect :</label>
</dt>
<dd>
<select id="transitions">
<option value="circles">Circles</option>
<option value="squares">Squares</option>
<option value="circle">Circle</option>
<option value="diamond">Diamond</option>
<option value="verticalSunblind">Vertical Sunblind</option>
<option value="verticalOpen">Vertical open</option>
<option value="clock">Clock</option>
<option value="horizontalOpen">Horizontal open</option>
<option value="horizontalSunblind">Horizontal Sunblind</option>
<option value="transition-opacity">Opacity</option>
<option value="transition-simple1">Simple</option>
<option value="transition-zoomin">Zoom in</option>
<option value="transition-zoomout">Zoom out</option>
<option value="transition-flip">Flip</option>
<option value="transition-cardflip">Card flip</option>
<option value="transition-rotatezoomin">Rotate and scale in</option>
<option value="transition-rotatezoomout">Rotate and scale out</option>
<option value="transition-topfade">Top fade</option>
<option value="transition-skewflip">Skew flip</option>
<option value="transition-left">Left</option>
<option value="transition-top">Top</option>
<option value="transition-oblique">Oblique</option>
</select>
</dd>
</dl>
<dl>
<dd>
<select id="themes" style="display:none;">
<option default value="no-control"></option>
</select>
</dd>
</dl>
</fieldset>
<fieldset id="flickr_options">
<input type="file" id="images" multiple style="display:block;" />
<legend>
<button class="btn btn-info" id="flickr_enabled" type="submit">Start Processing</button>
</legend>
</fieldset>
</form>
<div id="demo">
<div class="slider transition-topfade no-control" style="width: 600px; height:400px;">
<div class="loader"><span class="spinner"></span> <span class="percent">100</span>%</div>
<div class="slide-images" style="width: 600px; ">
<div class="slide-image" style="width: 600px;">
<canvas id="myCanvas" class="slide-images" width="600" height="400"></canvas>
</div>
</div>
</div>
</div>
</section>
</div>
<!--<iframe style="display: none;"></iframe>-->
</body>
</html>