How do I create a Rewind Functionality for YouTube video - javascript

Hi Friends I want to develop a rewind functionality that when i clicked on rewind button the YouTube Video which is shown in I-frame rewind for 10 sec But I could not get How can I Create this If you have any solution Please share with me soon.
Here is my code.
[![<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Youtube videos proxy server</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<?php
$val="";
$vid="0TvTyj5FAaQ";
$str = file_get_contents('video.json');
$json = json_decode($str, true);
foreach ($json as $value) {
if($value\["id"\]==$vid){
$val="TRUE";
break;
}else{
continue;
}
}
if($val=="TRUE"){ ?>
<div>
<div style="height: 345px;width: 700px;background: black;">
<span style="color: white;">This video has restricted content.</span>
</div>
</div>
<?php }else{
?>
<div id="player">
<iframe id="player" width="700" height="345" src="https://www.youtube.com/embed/<?php echo $vid?>?enablejsapi=1&showinfo=0&rel=0"> </iframe>
<br/>
<button id='rwnd' onclick="rewind()" >Rewind</button>
</div>
<?php } ?>
<script type="text/javascript">
var player=document.getElementById("player");
var rewind= function(){
if (! player){alert("no obj");
}else{
alert('hello');
var currentTime = player.getCurrentTime();
console.log(currentTime);
if(currentTime>5){
player.seekTo(currentTime - 5, true);
player.playVideo();
}
}
};
</script>
</body>
</html>][1]][1]
Here is video.json file.
[
{
"id": "0dV1Bwe2v6c"
},
{
"id":"0dmhKtQ74wo"
},
{
"id":"0dV1Bwe2v6c"
}
]

Friends I got the answer now hope it will help you too. json file is same as in the question i added in code.
Here is the solution....
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Youtube videos proxy server</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<?php
$val="";
$vid="0TvTyj5FAaQ";
$str = file_get_contents('video.json');
$json = json_decode($str, true);
foreach ($json as $value) {
if($value["id"]==$vid){
$val="TRUE";
break;
}else{
continue;
}
}
if($val=="TRUE"){ ?>
<div>
<div style="height: 345px;width: 700px;background: black;">
<span style="color: white;">This video has restricted content.</span>
</div>
</div>
<?php }else{
?>
<div id="player1">
<iframe id="player" width="700" height="345" src="https://www.youtube.com/embed/<?php echo $vid?>?enablejsapi=1&showinfo=0&rel=0"> </iframe>
<br/>
<button id='rwnd' disabled>Rewind</button>
</div>
<?php } ?>
<script type="text/javascript">
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
events: {
'onStateChange': onPlayerReady
}
});
}
function onPlayerReady(event){
if(player.getPlayerState()===1 || player.getPlayerState()===2){
$('#rwnd').prop('disabled', false);
$( "#rwnd" ).click(function() {
rewind();
});
}else{
$('#rwnd').prop('disabled', true);
}
}
function rewind(){
var currentTime = player.getCurrentTime();
if(currentTime>10){
player.seekTo(currentTime - 10, true);
player.playVideo();
}else{
player.stopVideo();
console.log("Try to rewind video when current playing time greater than 10.");
}
};
</script>
</body>
</html>

Related

Function runs immediately without setTimeout() in Javascript

I want to build a web with HTML, CSS, Javascript, PHP and MySQL. I want my web will have a feature that the customers want to download the file from the web, if they don't want to download faster, no need to go through the shorten link, they will enter the code and web will use PHP and MySQL to check if the code is in the database. If the code valid, they will press the Next button to go to download file.
This is all my code:
HTML + CSS + JS + PHP:
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function countWord() {
var x = document.getElementById("code").value;
if ((x.length)!=12) {
document.getElementById("ok").disabled = true;
} else if ((x.length)==12) {
document.getElementById("ok").disabled = false;
}
}
</script>
<style>
* {
padding:0;
margin:0;
box-sizing:border-box;
}
body {
background-color:#fff;
}
#code {
width:98%;
margin-left:1%;
}
#ok {
width:50%;
margin-left:25%;
margin-top:10px;
}
#nextbtn {
width:50%;
margin-left:25%;
margin-top:10px;
}
</style>
</head>
<body>
<form method="POST" name="code_form" id="code_form">
<input type="text" class="form-control" name="code" id="code" onkeyup="countWord();">
<input type="submit" name="ok" id="ok" class="btn btn-primary" disabled>
</form>
<button type="button" disabled class="btn btn-primary" id="nextbtn">Next</button>
<?php
$conn = mysqli_connect("","","","");
if (isset($_POST["ok"])) {
$code = $_POST["code"];
$sql = "SELECT * FROM code WHERE code='$code'";
$result = mysqli_query($conn,$sql);
if (mysqli_num_rows($result) == 1) {
echo "
<script>
var x = setTimeout(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
},0);
</script>
";
} else {
echo "<script>alert('Error');</script>";
}
}
?>
</body>
</html>
In the code below, I want to be able to run the function immediately without using the setTimeout() function:
echo "
<script>
var x = setTimeout(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
},0);
</script>
";
Please help me!
This function will be invoked immediately. IIFE
(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
})()
Is removing the setTimeout only not enough?
<script>
(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
})();
</script>
<script>
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
</script>
//---
<html>
<head>
<title>HTML Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function countWord() {
var x = document.getElementById("code").value;
if ((x.length) != 12) {
document.getElementById("ok").disabled = true;
} else if ((x.length) == 12) {
document.getElementById("ok").disabled = false;
}
}
</script>
<style>
* {
padding:0;
margin:0;
box-sizing:border-box;
}
body {
background-color:#fff;
}
#code {
width:98%;
margin-left:1%;
}
#ok {
width:50%;
margin-left:25%;
margin-top:10px;
}
#nextbtn {
width:50%;
margin-left:25%;
margin-top:10px;
}
</style>
</head>
<body>
<form method="POST" name="code_form" id="code_form">
<input type="text" class="form-control" name="code" id="code" onkeyup="countWord();">
<input type="submit" name="ok" id="ok" class="btn btn-primary" disabled>
</form>
<button type="button" disabled class="btn btn-primary" id="nextbtn">Next</button>
<?php
//$conn = mysqli_connect("", "", "", "");
if (isset($_POST["ok"])) {
$code = $_POST["code"];
//$sql = "SELECT * FROM code WHERE code='$code'";
//$result = mysqli_query($conn, $sql);
//if (mysqli_num_rows($result) == 1) {
if (1 == 1) {
echo "<script>
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
</script>";
} else {
echo "<script>alert('Error');</script>";
}
}
?>
</body>

php shell and video run in parallel

I am trying to connect an eye tracker with a web site.
i want when the user press a button , a video start playing and run a shell process at the same time
here is a part of my code
`
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="vid1" width="100%" height="240" >
<source src="assets/img/aa.mp4" type="video/mp4" >
</video>
<script>
function play(vidid) {
var myVideo = vidid;
$('.vjs-fullscreen-control').click();
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
}
else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
}
else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
}
else if (myVideo.webkitRequestFullScreen) {
myVideo.webkitRequestFullScreen();
}
myVideo.play();
var vid = document.getElementById("vid");
vidid.onended = function() {
document.exitFullscreen(); //kanei exit toy video apo thn prliri o8oni otan auto teleiosei
}
}
</script>
</div>
start
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
<script src="popup.js"></script>
</body>
<?php
if ($_GET['run']) {
$last_line = exec("cd tobii_eye_tracker_linux_installer-master/example && ./main>example.txt > /dev/null 2>/dev/null &");
}
?>
</html>`
the shell process run correctly
but video never start

Can't add sound alert on every new message on chat website

I'm building a chat website and i want to add a sound alert whenever a new message is sent so i can alert other users for new unread messages(i use MySQL for storing messages etc.). I use ajax to get the messages from the database and put them on my chatbox. I tryied every way but it doesn't seen to work idividually on every NEW message. Please help!
That's my index.php
<?php
session_start ();
define('DB_HOST', 'localhost');
define('DB_NAME', '*******');
define('DB_USER','*****');
define('DB_PASSWORD','********');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<META HTTP-EQUIV="content-type" CONTENT= "text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Chat2Chat!</title>
</head>
<body id="body-color">
<?php
if (! isset ( $_SESSION ['user'] )) {
header ( "Location: sign-in.html" ); // Redirect the user
} else {
?>
<div id="wrapper">
<div id="menu">
<p class="welcome">
Καλωσήρθες, <b><?php echo $_SESSION['user']; ?></b>
</p>
<p class="logout">
<b class="submitmsg" id="exit" href="#">Logout</b>
</p>
<div style="clear: both"></div>
</div>
<div id="chatbox" class="chatbox">
</div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" autofocus/>
<input class="submitmsg" name="submitmsg" type="submit" id="submitmsg" value="Αποστολή"/>
</form>
</div>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
setInterval ( "get()", 2000 );
});
//jQuery Document
$(document).ready(function(){
//If user wants to end session
$("#exit").click(function(){
var exit = confirm("Είσαι σίγουρος πως θέλεις να αποσυνδεθείς;");
if(exit==true){window.location = 'index.php?logout=true';}
});
});
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
loadLog;
return false;
});
setInterval (loadLog, 2500);
function get(){
$.ajax({
type: 'GET',
url: 'chat.php',
success: function(data){
$("#chatbox").html(data);
var scroll = document.getElementById('chatbox');
scroll.scrollTop = scroll.scrollHeight;
}
});
}
</script>
<?php
}
?>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
The chat.php
<!DOCTYPE HTML>
<head>
<title>Chat</title>
<META HTTP-EQUIV="content-type" CONTENT= "text/html; charset=UTF-8">
</head>
<?php
define('DB_HOST', 'localhost');
define('DB_NAME', 'db_57218');
define('DB_USER','u57218');
define('DB_PASSWORD','27222528');
$con = mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME) or die("Failed to connect to MySQL: " . mysqli_error());
$query = "SELECT * FROM Messages";
if($result = mysqli_query ($con, $query)){
while ($row = mysqli_fetch_row($result))
{if($row['4']==0){
echo '('.$row['5'].') <b>'.$row['1'].'</b>: '.$row['2'].'<br>';
}
else{echo 'Ο χρήστης <b>'.$row['1'].'</b> '.$row['2'].'<br>';}
}
mysqli_free_result($result);
}
mysqli_close($con);
?>
You can store the last message id which you played sound for, and at every refresh action, you can check if the last message id is equals to id you stored before. If not, you play sound.
To be more clear:
$lastMessageId=5;
$lastMessageIdWePlayedSoundFor=4;
if($lastMessageId!=$lastMessageIdWePlayedSoundFor)
{
////play sound here
$lastMessageIdWePlayedSoundFor=$lastMessageId;
}
So whenever there is a new message we haven't played a sound for it's existance, we play sound. You can use this algorithm.

switch pages using AJAX PHP

Good day all, I'm working on a jquery game and I'm making a welcome screen. I'm using ajax to switch pages. So far the pages are switching exactly but the page index.php where game's elements are running has stopped working and no animation is working. Here are the codes:
welcome.php script:
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
function swapContent(cv) {
var url = "page-switch.php";
$.post(url, {contentVar: cv} ,function(data) {
$("#myDiv").html(data).show();
});
}
</script>
</head>
<body>
Play!
Scoreboard
<div id="myDiv"></div>
</body>
page-switch.php script:
<?php
$contentVar = $_POST['contentVar'];
if ($contentVar == "con1") {
header('Location: index.php');
} else if ($contentVar == "con2") {
header('Location: score-post.php');
}
?>
index.php script:
<head>
<title>Space Game Test 01</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-collision.js"></script>
<script src="js/core-animation.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/content-style.css">
</head>
<body onload="start()">
<div id="content">
<div id="galaxy"><img src="images/galaxy.png" /><img src="images/galaxy.png" /></div>
</div>
<div id="linkpanel"></div>
<div id="scoreboard">Score<br><div id="score">0</div><input type="button" id="pause" value="Pause" /><br>
<input type="button" id="resume" value="Resume" /></div>
<script>
var pause = null;
$("#resume").click(function () {
if(!pause)
{
pause = setInterval(scroll_ns, 50)
}
});
$("#pause").click(function () {
clearInterval(pause);
pause = null;
});
</script>
</body>
Am I doing wrong here? I'm pretty noob in ajax but I really need to learn. Please help! Tnx.
you can use load function also
<script>
function swapContent(page) {
jQuery( "#myDiv" ).load(page);
}
</script>
Play!
Scoreboard
<div id="myDiv"></div>
You may try something like this you have to redirect to the page after getting response from ajax.
<script>
function swapContent(cv) {
var url = "page-switch.php";
$.post(url, {contentVar: cv} ,function(data) {
//alert(data)
if(data="first"){
window.location.href = "index.php";
}
if(data="second"){
window.location.href = "score.php";
}
});
}
</script>
</head>
<body>
Play!
Scoreboard
<div id="myDiv"></div>
</body>
page-switch.php script:
<?php
$contentVar = $_POST['contentVar'];
if ($contentVar == "con1") {
echo "first";
} else if ($contentVar == "con2") {
echo "second";
}
?>

Keeping Uploaded Images On Page After Refresh (PHP/HTML/JAVASCRIPT)

I'm doing a small project where I'm trying to create a continual gallery for a user; whereby, they upload a file, and it immediately appears on the same page. The one thing I can't manage to accomplish is to keep the files there on the page even if the page is refreshed. In other words, I want the user to return and see all of their uploaded files as if they never left, until they close the browser. I've tried using cookies and session variables but I'm confused on how to implement this. Here is my Code. I APOLOGIZE IN ADVANCE FOR BAD INDENTATION.
My index.php:
<?php
// Process image
$uploadName = 'uploaded/pic.jpg';
if (count($_FILES))
move_uploaded_file($_FILES['image']['tmp_name'], $uploadName);
?>
<!DOCTYPE html>
<html>
<head>
<style>
li { display: inline-block; padding: 200px; width: 200px;}
img { width: 100%; height:100%;}
</style>
<script type="text/javascript">
function iframeSubmit(formElem, action, callback) {
// name a callback that will be called from inside the iframe
var callbackName = 'iframe' + Math.ceil(Math.random() * 10000);
action = action + (action.indexOf('?') == -1 ? '?' : '&') + 'callback='+
callbackName;
// create an iframe and use the callback as its name
var iframe = document.createElement('iframe');
iframe.setAttribute('name', callbackName);
iframe.style.display = 'none';
// add the target and edit the action of the form
formElem.setAttribute('target', callbackName);
formElem.setAttribute('action', action);
// add the hidden iframe after the form
formElem.parentNode.appendChild(iframe);
window[callbackName] = callback;
}
;
</script>
</head>
<body onload="onload()">
Home
Schedule
<form method="post" action="index.php" enctype="multipart/form-data">
<input type="file" name="image"/>
<input type="submit" value="upload"/>
</form>
<ul>
<?php if (count($_FILES)): ?>
<li><img src="<?php echo $uploadName ?>"/></li>
<?php endif; ?>
</ul>
<script type="text/javascript">
function onload() {
}
</script>
<script type="text/javascript">
function processResponse(response) {
if (!response.success) {
alert('woopsie');
return;
}
var newListItem = document.createElement('li');
newListItem.innerHTML = '<img src="' + response.path + '"/>';
document.getElementsByTagName('ul')[0].appendChild(newListItem);
}
function onload() {
iframeSubmit(document.getElementsByTagName('form')[0], 'upload.php',
processResponse);
}
</script>
</body>
</html>
Here is my upload.php:
<?php
enter code here
$imagePath = 'uploaded/pic.jpg';
setcookie("cookie", "stuff", time() + 3600, $uploadName);
move_uploaded_file($_FILES['image']['tmp_name'], $imagePath);
?>
<!DOCTYPE html>
<html>
<head>Iframe content</head>
<body>
<script type="text/javascript">
<?php
echo 'window.parent[\'' . $_GET['callback'] . '\']('
. json_encode(array('success' => true, 'path' => $imagePath)) . ')';
?>
</script>
</body>
</html>

Categories