база данных — код не работает: URL фильма не будет воспроизводиться в видео плеере
У меня есть вкладка аккордеона и проигрыватель фильмов. На вкладке «Видео» мои фильмы отображаются в виде постеров. Когда вы нажимаете на плакат, предполагается, что он воспроизводит соответствующий фильм, который находится в базе данных для этого плаката. PHP-код работает и извлекает постер и правильную информацию. Однако, когда вы нажимаете на постер, он не воспроизводит фильм. В моей базе данных столбец URL фильма называется «movieurl». Что я делаю неправильно. Вот мой код:
<?php
//database connection
$host = 'localhost';
$user = 'root';
$pass = 'root';
$db = 'movies';
/* 1) mysqli and mysqli result objects */
//$mysqli is object of mysqli class
$mysqli = new mysqli($host,$user,$pass,$db);
//print_r($mysqli);die;
//call query method of $mysqli object
$result = $mysqli->query
//SELECT queries are always return as mysqli result objects
("SELECT * FROM movies WHERE year BETWEEN 2000 AND 2016 ORDER BY rand() LIMIT 20")
or die($mysqli->error);
?>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background-color: black; color: #00cc00; margin: 0; padding: 0; position: fixed; width:100%;}
.tab {overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; align: center;}
.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s;}
.tab button:hover { background-color: #ddd;}
.tab button.active {background-color: #ccc;}
.tabcontent {display: none; padding: 0; border-top: none; max-height: 400px; position: fixed; width: 100%;}
video {width: 100%; max-height: 250px;}
#playlist {
display:table;
}
#playlist li{
cursor:pointer;
padding:8px;
}
#playlist li:hover{
color:blue;
}
</style>
</head>
<body>
<!--/PHP ON-DEMAND PLAYER / -->
<video id="my_video_1" class="video-js vjs-default-skin"controls
autoplay
data-setup="{}">
<p>Your browser does not support the video tag.</p>
</video>
<!--MAIN MENU:On Now,Videos-->
<div class="tab">
<button class="tablinks" onclick="openMenu(event, 'OnNow')">On Now</button>
<button class="tablinks" onclick="openMenu(event, 'Beans')">Videos</button>
</div>
<div id="menu2">
<div id="OnNow" class="tabcontent" style="display: block;">
<h3>OnNow</h3>
<p>ON PAGE LOAD: Retrieve and Display the title and description of what is actively playing in the video player.</p>
</div>
<div id="Beans" class="tabcontent">
<h3>On Demand Videos</h3>
<p> When you click a video below then the above video is interuppted and plays the video. </p>
<div id="moviesbox" class="tab-content active" style="display:none; z-index:0;" >
<?php while ($movie = $result->fetch_assoc()):?>
<div id="slider" >
<div class=poster><img width='<?php 67*2.3 ?>' height='<?= 98*2.3 ?>' src='<?= $movie['image_url'] ?>'></div> <br>
<div class=title><h1text><?= $movie['title'] ?></h1text> </div> <br>
<span class='year'>(<?= $movie['year'] ?>)</span>
</div></div>
<?php endwhile; ?>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
//MONITOR/PLAYLIST FUNCTIONS)
$(function() {
$("#playlist li").on("click", function() {
$("#my_video_1").attr({
"src": $(this).attr("movieurl"),
"poster": "",
"autoplay": ""})
$(".poster").click(function(){
img = $(this).clone();
$img = $mysqli("SELECT * FROM movies where movies_url");
$("#my_video_1").show().html(img.removeAttr(''));
});
})
$("#my_video_1").attr({
"src": $("#playlist li").eq(0).attr("movieurl"),
"poster": $("#playlist li").eq(0).attr("moviesposter")
})
$('#remove').on('click', function(e){
$("#my_video_1").empty();
$("#my_video_1").remove();
});
})
//TAB FUNCTIONS)
function openMenu(evt, menuName, skipClass) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"tablinks = document.getElementsByClassName("tablinks");
if(!skipClass) {
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
}
//Retrieve and display current tab information, and add an "active" class to the button that opened the tab
document.getElementById(menuName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …