I have one array include clips and images. This code show clip and image, but when I have more than 2 clips, on browser of smart tivi can't show video (on browser of PC show normal). Please help me show the bugs from browser of smart tivi. Below is index.html file
<!DOCTYPE html>
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video</title>
<link href="./css/style.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</header>
<body>
<div style="text-align:center">
<br><br>
<div class="fullscreen-bg" id="slideshow">
</div>
</div>
</body>
</html>
here is index.js file. When I run website in web browser of PC, it's ok, but when I run web on browser of smart tivi, it's have bugs but I can't show this. If on PC, I can turn on inspect of browser or on android mobile, I can setup to show bugs. Please help me the way show bugs from smart tivi :
var myVideo = document.getElementById("video1");
var video_list = ["file_upload/mov_bbb.mp4", "file_upload/Jellyfish.jpg", "file_upload/Lighthouse.jpg","file_upload/(1).mp4"];
function img(src) {
var el = document.createElement('img');
el.src = src;
// el.className += "fullscreen-bg__video";
el.style.width = "100%";
el.style.height = "100%";
return el;
}
function vid() {
//Accepts any number of ‘src‘ to a same video ('.mp4', '.ogg' or '.webm')
var el = document.createElement('video');
el.onplay = function () {
clearInterval(sliding);
};
el.onended = function () {
sliding = setInterval(rotateimages, 5000);
rotateimages();
};
var source = document.createElement('source');
for (var i = 0; i < arguments.length; i++) {
source.src = arguments[i];
source.type = "video/" + arguments[i].split('.')[arguments[i].split('.').length - 1];
el.appendChild(source);
}
el.className += "fullscreen-bg__video";
return el;
}
var galleryarray = [];
video_list.forEach(function(item){
if(isImage(item)){
galleryarray.push(img(item));
} else if(isVideo(item)){
galleryarray.push(vid(item));
}
});
var curimg = -1;
function rotateimages() {
$("#slideshow").fadeOut("slow");
setTimeout(function () {
curimg = (curimg < galleryarray.length - 1) ? curimg + 1 : 0;
document.getElementById('slideshow').innerHTML = '';
document.getElementById('slideshow').appendChild(galleryarray[curimg]);
if (galleryarray[curimg].tagName === "VIDEO") {
galleryarray[curimg].play();
}
$("#slideshow").fadeIn("slow");
}, 1000);
}
function getExtension(filename) {
var parts = filename.split('.');
return parts[parts.length - 1];
}
function isImage(filename) {
var ext = getExtension(filename);
switch (ext.toLowerCase()) {
case 'jpg':
case 'gif':
case 'bmp':
case 'png':
//etc
return true;
}
return false;
}
function isVideo(filename) {
var ext = getExtension(filename);
switch (ext.toLowerCase()) {
case 'm4v':
case 'avi':
case 'mpg':
case 'mp4':
// etc
return true;
}
return false;
}
var sliding;
window.onload = function () {
sliding = setInterval(rotateimages, 5000);
rotateimages();
function getExtension(filename) {
var parts = filename.split('.');
return parts[parts.length - 1];
}
function isImage(filename) {
var ext = getExtension(filename);
switch (ext.toLowerCase()) {
case 'jpg':
case 'gif':
case 'bmp':
case 'png':
//etc
return true;
}
return false;
}
function isVideo(filename) {
var ext = getExtension(filename);
switch (ext.toLowerCase()) {
case 'm4v':
case 'avi':
case 'mpg':
case 'mp4':
// etc
return true;
}
return false;
}
}
Aucun commentaire:
Enregistrer un commentaire