| Server IP : 127.0.0.1 / Your IP : 216.73.216.48 Web Server : Apache/2.4.58 (Win64) OpenSSL/3.1.3 PHP/8.2.12 System : Windows NT DESKTOP-3H4FHQJ 10.0 build 19045 (Windows 10) AMD64 User : win 10 ( 0) PHP Version : 8.2.12 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : D:/xampp/htdocs-coblaa/pureFaith/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<?php
include('db.php');
session_start();
?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main_css/clip_player.css?v2" />
<title>Online Video Player</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
</style>
</head>
<body>
<div class="shell_main_play_div" >
<?php if(isset($_GET['vidid'])){
$vidid = $_GET['vidid'];
$vidurl = $_GET['vidurl'];
$vidname = $_GET['vidname'];
$vidthumb = $_GET['vidthumb'];
$vidalbid = $_GET['vidalbid'];
$count_vidView =$_GET['count_vidView'];
$getComment_count ="select * from clip_commenttb where videoId='$vidid' ";
$run_getComment_count = mysqli_query($con,$getComment_count);
$check_comm_count = mysqli_num_rows($run_getComment_count);
?>
<div classk="flex flex-col w-full" class="main_play_div" stylek="width:60%;float:left;background:green;" >
<button onclick="history.back();" class="close_playerBtn">x</button>
<div id="videoPlayerContainer" class="video-container roundedk-xl shadow-2xl overflow-hidden relative" >
<video id="videoPlayer" class="w-full h-full" poster="main_icon/preloader.GIF" playsinline autoplay >
<!-- Replace this with your video source -->
<source src="CB_video/<?php echo $vidurl; ?>" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="curPlayingVid" ></div>
<!-- Video Player Controls Overlay -->
<div id="controlsOverlay" class="controls-overlay">
<!-- Progress Bar -->
<div id="progressBarContainer" class="progress-bar-container">
<div id="progressBar" class="progress-bar w-0"></div>
</div>
<!-- Controls Row -->
<div class="controls-row">
<!-- Play/Pause Button -->
<button id="playPauseBtn" class="control-button">
<svg id="playIcon" class="icon" viewBox="0 0 24 24" style="display: block;">
<path d="M8 5v14l11-7z" />
</svg>
<svg id="pauseIcon" class="icon" viewBox="0 0 24 24" style="display: none;">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
</svg>
</button>
<!-- Time Display -->
<div class="flex-grow text-center text-sm">
<span id="currentTime">00:00</span> / <span id="duration">00:00</span>
</div>
<!-- Volume Control -->
<div class="volume-container">
<button id="volumeBtn" class="control-button">
<svg id="volumeIcon" class="icon" viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
</svg>
</button>
<input type="range" id="volumeSlider" class="volume-slider" min="0" max="1" step="0.01" value="1">
</div>
<!-- Fullscreen Button -->
<button id="fullscreenBtn" class="control-button">
<svg class="icon" viewBox="0 0 24 24">
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
</svg>
</button>
</div>
</div>
</div>
<p id="video_name_detatil" class=" vid_nameLebal textk-sm text-kgray-400 mt-4 max-wk-lg" ><?php echo $vidname; ?></p>
<div class="main_view_div" >
<span id="view_output" class="view_output" ><?php echo $count_vidView; ?></span>
<input id="comVid_idHelp" value="<?php echo $vidid; ?>" class="help_input" />
<button onclick="show_forYou_div();" class="forYou_vid">More Videos</button>
<span>
<img src="main_icon/comt.png" onclick="disp_commDiv();" class="com_icon"/>
<span id="comt_output" class="comt_output" ><?php if($check_comm_count <1){}else{ echo $check_comm_count;} ?></span>
</span>
</div>
</div>
<div class="main_wallAd" style="displayk:none;"> Main Ad Wall 1</div>
<?php } ?>
</div>
<div id="videos_list_output"></div>
<div id="mob_videos_list_output"></div>
<div id="commentDiv" class="commentDiv">
<div class="sub_commentDiv">
<div class="comment_dispDiv">
<div class="com_home">
<span class="vidComm_count"><span id="comt_count_output" ></span> Comments</span>
<button onclick="close_commDiv();" class="close_commDisp">x</button>
</div>
<div class="com_home_position" ></div>
<div id="dispComment_output" ></div>
<!--div class="singleComm_dispDiv">
<span class="comProfile">001</span>
<span class="comUsername">Name</span>
<img src="main_icon/more_opton.png" class="comOptionBtn" alt="moreOpt" />
<span class="commentOutput">Your video carrys alot of information so people should give it time</span>
</div>
<!--div class="singleComm_dispDiv">
<span class="comProfile">001</span>
<span class="comUsername">Name</span>
<img src="main_icon/more_opton.png" class="comOptionBtn" alt="moreOpt" />
<span class="commentOutput">Your video carrys alot of information so people should give it time
Your video carrys alot of information so people should give it time
Your video carrys alot of information so people should give it time
Your video carrys alot of information so people should give it time
</span>
</div-->
</div>
<div class="comment_inptDiv">
<span id="commentErorr" class="commentErorr" ></span>
<input id="commentInput" class="commentInput" placeholder="Comment..." />
<?php if(!isset($_SESSION['my_id'])){ ?>
<a href="login"><span class="comment_sendBtn">OK</span></a>
<?php }else{ ?>
<span onclick="commentSave();" class="comment_sendBtn">OK</span>
<?php } ?>
</div>
</div>
<div class="freeSpace">Ad area</div>
</div>
<!-- Footer -->
<footer class="w-full text-center py-4 mt-8 text-sm text-gray-500" style="Display:none;float:left;width:98%;background:red;">
<p>
<a href="#" class="hover:underline">Privacy Policy</a>
<span class="px-2">|</span>
<a href="#" class="hover:underline">Terms of Service</a>
</p>
<p class="mt-2">© 2025 Video Player. All Rights Reserved.</p>
</footer>
<script>
/* disp_video_list();
function disp_video_list()
{
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","auto_page.php?status=disp_video_list",false);
xmlhttp.send(null);
document.getElementById('videos_list_output').innerHTML=xmlhttp.responseText;
//monitor_disp_checker =document.getElementById('monitor_disp_checker').value;
}*/
// ... existing JavaScript code ...
disp_video_list();
function disp_video_list() {
// Use the fetch API for a modern, asynchronous request
fetch("auto_page.php?status=disp_recommand_video")
.then(response => {
// Check if the request was successful
if (!response.ok) {
throw new Error('Network response was not ok');
}
// Parse the response body as text
return response.text();
})
.then(data => {
// Insert the HTML content into the videos_list_output div
document.getElementById('videos_list_output').innerHTML = data;
document.getElementById('mob_videos_list_output').innerHTML = data;
})
.catch(error => {
// Handle any errors that occurred during the fetch
console.error("Error fetching video list:", error);
document.getElementById('videos_list_output').innerHTML = "<p>Failed to load video list.</p>";
});
}
function show_currentVid(scv)
{
idVid =scv;
fetch("auto_page.php?ongoin_vidid="+idVid+"&status=disp_detail_video")
.then(response =>{
if (!response.ok) {
throw new Error('Network response was not ok');
}
// Parse the response body as text
return response.text();
})
.then(data => {
// Insert the HTML content into the videos_list_output div
document.getElementById('curPlayingVid').innerHTML = data;
detail_vidurl = document.getElementById('detail_vidurl').value;
video_name = document.getElementById('video_name').value;
detail_vidId = document.getElementById('detail_vidId').value;
vidPath='CB_video/'+detail_vidurl;
document.getElementById('videoPlayer').src=vidPath;
document.getElementById('video_name_detatil').innerHTML=video_name;
document.getElementById('comVid_idHelp').value=detail_vidId;
detail_vidCom = document.getElementById('detail_vidCom').value;
document.getElementById('comt_output').innerHTML=detail_vidCom;
vidView_count = document.getElementById('vidView_count').value;
document.getElementById('view_output').innerHTML=vidView_count;
document.getElementById('mob_videos_list_output').style.display="none";
//alert(vidView_count);
})
.catch(error => {
// Handle any errors that occurred during the fetch
console.error("Error fetching video list:", error);
document.getElementById('curPlayingVid').innerHTML = "<p>Failed to load video list.</p>";
});
window.scrollTo(0,0)
}
// Get all the necessary DOM elements
const videoPlayer = document.getElementById('videoPlayer');
const videoContainer = document.getElementById('videoPlayerContainer');
const playPauseBtn = document.getElementById('playPauseBtn');
const playIcon = document.getElementById('playIcon');
const pauseIcon = document.getElementById('pauseIcon');
const progressBarContainer = document.getElementById('progressBarContainer');
const progressBar = document.getElementById('progressBar');
const currentTimeEl = document.getElementById('currentTime');
const durationEl = document.getElementById('duration');
const volumeBtn = document.getElementById('volumeBtn');
const volumeSlider = document.getElementById('volumeSlider');
const fullscreenBtn = document.getElementById('fullscreenBtn');
// Helper function to format time
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
};
// Play/Pause functionality
playPauseBtn.addEventListener('click', () => {
if (videoPlayer.paused || videoPlayer.ended) {
videoPlayer.play();
videoContainer.classList.add('playing');
} else {
videoPlayer.pause();
videoContainer.classList.remove('playing');
}
});
// Update play/pause icon based on video state
videoPlayer.addEventListener('play', () => {
playIcon.style.display = 'none';
pauseIcon.style.display = 'block';
});
videoPlayer.addEventListener('pause', () => {
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
});
// Update progress bar
videoPlayer.addEventListener('timeupdate', () => {
const progress = (videoPlayer.currentTime / videoPlayer.duration) * 100;
progressBar.style.width = `${progress}%`;
currentTimeEl.textContent = formatTime(videoPlayer.currentTime);
});
// Set duration and aspect ratio on metadata load
videoPlayer.addEventListener('loadedmetadata', () => {
durationEl.textContent = formatTime(videoPlayer.duration);
const aspectRatio = videoPlayer.videoWidth / videoPlayer.videoHeight;
videoContainer.style.aspectRatio = aspectRatio;
});
// Seek functionality
progressBarContainer.addEventListener('click', (e) => {
const rect = progressBarContainer.getBoundingClientRect();
const clickPosition = e.clientX - rect.left;
const newTime = (clickPosition / rect.width) * videoPlayer.duration;
videoPlayer.currentTime = newTime;
});
// Volume control
volumeBtn.addEventListener('click', () => {
videoPlayer.muted = !videoPlayer.muted;
if (videoPlayer.muted) {
volumeSlider.value = 0;
} else {
volumeSlider.value = videoPlayer.volume;
}
});
volumeSlider.addEventListener('input', () => {
videoPlayer.volume = volumeSlider.value;
videoPlayer.muted = videoPlayer.volume === 0;
});
// Fullscreen functionality
fullscreenBtn.addEventListener('click', () => {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
videoContainer.requestFullscreen();
}
});
// Exit fullscreen with 'Esc' key
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
videoContainer.classList.add('fullscreen');
} else {
videoContainer.classList.remove('fullscreen');
}
});
function disp_commDiv()
{
document.getElementById('commentDiv').style.display="block";
comVid_id = document.getElementById('comVid_idHelp').value;
fetch("auto_page.php?comVid_id="+comVid_id+"&status=displayVid_comment")
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
document.getElementById('dispComment_output').innerHTML = data;
})
.catch(error => {
console.error("Error fetching video list:", error);
document.getElementById('dispComment_output').innerHTML = "<p>Failed to load video list.</p>";
});
fetch("auto_page.php?comVid_id="+comVid_id+"&status=Vid_comment_count")
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
document.getElementById('comt_count_output').innerHTML = data;
document.getElementById('comt_output').innerHTML = data;
})
.catch(error => {
console.error("Error fetching video list:", error);
document.getElementById('comt_count_output').innerHTML = "<p>Failed to load video list.</p>";
});
window.scrollTo(0,0)
}
function close_commDiv()
{
document.getElementById('commentDiv').style.display="none";
}
function commentSave()
{
comVid_id = document.getElementById('comVid_idHelp').value;
commentInput = document.getElementById('commentInput').value;
if(!commentInput==""){
fetch("auto_page.php?comVid_id="+comVid_id+"&commentInput="+commentInput+"&status=insertVid_comment")
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
document.getElementById('commentErorr').innerHTML = data;
document.getElementById('commentInput').value="";
disp_commDiv();
})
.catch(error => {
console.error("Error fetching video list:", error);
document.getElementById('commentErorr').innerHTML = "<p style='color:red;'>Failed to load video list.</p>";
});
}
}
function show_forYou_div()
{
document.getElementById('mob_videos_list_output').style.display="block";
}
function close_forYou_div()
{
document.getElementById('mob_videos_list_output').style.display="none";
}
</script>
</body>
</html>