Currently, I am able to post and retrieve content from my php database. I am also able to play the demo links that comes with videogular in the video player. However, when i click the poster image of the retrieved php database video, it does not click and does not play in the Html 5 video player. Does anyone know how i can play php videos stored in my database (yes I know that's wrong) with the html5 player?
Here is my code:
<?php require_once('conn.php'); ?>
<html>
<head>
<link href="css/site.css" rel="stylesheet" type="text/css">
<link href="css/videoPlaylist.css" rel="stylesheet" type="text/css">
<link href="css/videoangularplaylist.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/videogular/videogular.js">
</script>
<script src="https://unpkg.com/videogular@2.1.2/dist/controls/vg-controls.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/overlay-play/vg-overlay-play.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/poster/vg-poster.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/buffering/vg-buffering.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller">
<div class="videogular-container">
<videogular vg-player-ready="controller.onPlayerReady($API)" vg-complete="controller.onCompleteVideo()" vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks">
</vg-media>
<vg-controls>
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
</videogular>
</div>
<div class="playlist">
<ul>
<li><a ng-click="controller.setVideo(0)" target="_OnNow">Pale Blue Dot</a></li>
<li><a ng-click="controller.setVideo(1)">Big Buck Bunny</a></li>
<?php
$db = mysqli_connect("localhost", "root", "root", "myStylzTV");
$sql = "SELECT * FROM videos";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
echo "<img src='videos/".$row['image']."' >";
echo "<p>".$row['text']."</p>";
echo "<p>".$row['id']."</p>";
echo "</div>";
}
?>
</div>
</div>
'use strict';
angular.module('myApp',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.poster",
"com.2fdevs.videogular.plugins.buffering"
]
)
.controller('HomeCtrl',
["$sce", "$timeout", function ($sce, $timeout) {
var controller = this;
controller.state = null;
controller.API = null;
controller.currentVideo = 0;
controller.onPlayerReady = function(API) {
controller.API = API;
};
controller.onCompleteVideo = function() {
controller.isCompleted = true;
controller.currentVideo++;
if (controller.currentVideo >= controller.videos.length) controller.currentVideo = 0;
controller.setVideo(controller.currentVideo);
};
controller.videos = [
{
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
]
},
{
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_stereo.ogg"), type: "video/ogg"}
]
},
];
controller.config = {
preload: "none",
autoHide: true,
autoHideTime: 3000,
autoPlay: true,
sources: controller.videos[0].sources,
plugins: {
poster: "http://www.videogular.com/assets/images/videogular.png"
}
};
controller.setVideo = function(index) {
controller.API.stop();
controller.currentVideo = index;
controller.config.sources = controller.videos[index].sources;
$timeout(controller.API.play.bind(controller.API), 100);
};
}]
);
</script>
</body>
<?php error_reporting(-1); ?>
</html>
