I was just wondering is there any option to create a Javascript that pauses a video that is currently playing when You click play on another video.
I've got about 30-40 HTML5 video tags on one page.
Code that I'm using to put videos on page:
function pobierz_klipy($typ) {
$result = mysql_query("SELECT * FROM Klipy WHERE typ = $typ ORDER BY id")
or die("Zapytanie niepoprawne");
//ilosc zwroconych wierszy
$num_rows = mysql_num_rows($result);
$i = 0;
while ($i < $num_rows) {
$id = mysql_result($result, $i, "id");
$nazwa = mysql_result($result, $i, "nazwa");
$nazwa_rob = mysql_result($result, $i, "nazwa_rob");
$typ = mysql_result($result, $i, "typ");
$sprawdzian_hq = $sciezka = "../video/data/video/" . $nazwa_rob . "_fb.mp4";
if (file_exists($sprawdzian_hq)) {
$sciezka = "../video/data/video/" . $nazwa_rob . "_fb.mp4";
} else {
$sciezka = "../video/data/video/" . $nazwa_rob . ".mp4";
}
if (file_exists($sprawdzian_hq)) {
$poster = "../video/data/thumbnails/" . $nazwa_rob . "_fb.mp4.jpg";
} else {
$poster = "../video/data/thumbnails/" . $nazwa_rob . ".mp4.jpg";
}
if (file_exists($sprawdzian_hq)) {
$hq = "../video/data/video/" . $nazwa_rob . ".mp4";
} else {
$hq = null;
}
$i = $i + 1;
echo "<div class=\"klip\">";
echo '<video id="' . $nazwa_rob . '" width="320" height="180" controls poster= "' . $poster . '" preload ="none">';
echo ' <source id="source_' . $nazwa_rob . '" src="' . $sciezka . '" type="video/mp4">';
echo 'Twoja przeglądarka nie obsługuje HTML5.';
echo '</video>';
echo '<br />';
if ($hq != null) {
echo '<button id="videolink' . $i . '" type="button" class="btn btn-danger active" style=" font-size: 10px; padding: 5px; position: absolute; bottom: 2px; left: 11px;">HQ</button>';
}
echo '<div class="nazwa">'.$nazwa.'</div>';
//skrypt zmiany jakosci JS
if (file_exists($sprawdzian_hq)) {
echo '
<script type = "text/javascript">
var videobutton = document.getElementById("videolink' . $i . '");
videobutton.addEventListener("click", function (event) {
';
echo "
var videocontainer$i = document.getElementById('$nazwa_rob');
var videosource$i = document.getElementById('source_$nazwa_rob');
var newmp4$i = '$hq';
var old_mp4$i = '$sciezka';
var aktywne$i = 'btn btn-success active';
var nieaktywne$i = 'btn btn-danger active';
var przycikstatus$i = document.getElementById('videolink$i');
var obecny_klip$i = videosource$i.getAttribute('src');
var czas_klipu$i = videocontainer$i.currentTime;
console.log(czas_klipu$i);
if (obecny_klip$i != newmp4$i) {
var videosource$i = document.getElementById('source_$nazwa_rob');
videocontainer$i.pause();
videosource$i.setAttribute('src', newmp4$i);
videocontainer$i.load();
videocontainer$i.pause();
videocontainer$i.currentTime = czas_klipu$i;
przycikstatus$i.setAttribute('class', aktywne$i);
videocontainer$i.play();
} else {
var videosource$i = document . getElementById('source_$nazwa_rob');
videocontainer$i.pause();
videosource$i.setAttribute('src',old_mp4$i);
videocontainer$i.load();
videocontainer$i.pause();
videocontainer$i.currentTime = czas_klipu$i;
przycikstatus$i.setAttribute('class', nieaktywne$i);
videocontainer$i.play();
}
}, false);
</script>
";
}
you can also use this javascript code.
//external.js
video = document.getElementsByClassName("video");
for (i = 0; i < video.length; i++) {
video[i].onplay = function () {
var currentIndex = index("video", this);
for (k = 0; k < video.length; k++) {
if (k == currenIndex) { continue }
video[k].pause();
}
}
}
function index(className, id) {
nodes = document.getElementsByClassName(className);
return [].indexOf.call(nodes, id);
}
<html>
<head>
</head>
<body>
<video class="video" src="video1.mp4" controls></video>
<video class="video" src="video2.mp4" controls></video>
<video class="video" src="video3.mp4" controls></video>
<video class="video" src="video4.mp4" controls></video>
<script src="external.js"></script>
</body>
</html>
Now i've got another issue with this code :
<script> video = document.getElementsByClassName("video");
for (i = 0; i < video.length; i++) {
video[i].onplay = function () {
var currentIndex = index("video", this);
for (k = 0; k < video.length; k++) {
if (k == currentIndex) { continue }
video[k].pause();
}
}
}
function index(className, id) {
nodes = document.getElementsByClassName("video");
return [].indexOf.call(nodes, id);
}
</script>
I've got about 30 video tags on one page. When i try to play 6 videos one after another, the playback of 7th video doesn't run.
Excuse, i have not been notified. I used them same code to play one after another 30 videos without a problem. try to see if you have not limited the i value to 7 or something like that.
you may have only 7 tags that have 'video' class. if all's right, try to replace. document.getElementsByClassName by document.getElementsByTagName and try again. sorry not to have responded at time.
Related
I have a loop in php and I'm using a js function onclick to get the id from the php loop. I do loop in js to recognize a php dynamic id, but it recognizes the wrong order of the loop item.
Sample php code:
$list = 1;
for ($i = 0; $i < 7; $i++ ){
$listNo = $list;
$list++;
$html .= "<div class='row l'>";
$html .= " <div class='col-xl-3 col-lg-8 col-6'>
<input name=']' id='dm_slider_img_url_$listNo' type='text' value='" . $dm_slides[++$counter] . "'/>
<button class='set_custom_images' id='meta-image-button-$listNo'>
<span class='dashicons dashicons-plus-alt'></span>
</button>
</div>
<div class='col-xl-1 col-lg-4 col-6 mr-auto'>
<img id='dm_slider_img_preview_$listNo' src='" . $dm_slides[$counter++] . "' name=''>
</div>";
$html .= "</div>";
}
Sample js code:
var send_attachment_bkp = wp.media.editor.send.attachment;
for (let ids=1; ids<8; ids++) {
if ($('#meta-image-button-'+ids).length > 0) {
if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
$(document).on('click', '.set_custom_images', function(e) {
e.preventDefault();
var button = $(this);
var id = button.prev();
wp.media.editor.send.attachment = function(props, attachment) {
$('#dm_slider_img_url_'+ids).val(attachment.url);
$('#dm_slider_img_preview_'+ids).attr('src',attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
};
wp.media.editor.open(button);
return false;
});
}
}
}
What am I doing wrong?
After looking other questions related to getting id, I figured it out. After calling click function using button class, I stored it as variable and added this variable.
$(document).ready(function() {
var $ = jQuery;
// var ids = 1;
// $(«.set_custom_images»).onclick = function(t) {t.attr(«id»)}
var send_attachment_bkp = wp.media.editor.send.attachment;
if ($("[id^='meta-image-button-']" ).length > 0) {
if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
$(document).on('click', '.set_custom_images', function(e) {
var clickedID = this.id;
e.preventDefault();
var button = $(this);
var id = button.prev();
wp.media.editor.send.attachment = function(props, attachment) {
$('#dm_slider_img_url_'+clickedID).val(attachment.url);
$('#dm_slider_img_preview_'+clickedID).attr('src',attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
};
wp.media.editor.open(button);
return false;
});
}
}
});
And in php make some changes
$list = 1;
for ($i = 0; $i < 7; $i++ ){
$listNo = $list;
$list++;
$html .= "<div class='row l'>";
$html .= " <div class='col-xl-3 col-lg-8 col-6'>
<input name='' id='dm_slider_img_url_m_$listNo' type='text' value='" . $dm_slides[++$counter] . "'/>
<button class='set_custom_images' id='m_$listNo'>
<span class='dashicons dashicons-plus-alt'></span>
</button>
</div>
<div class='col-xl-1 col-lg-4 col-6 mr-auto'>
<img id='dm_slider_img_preview_m_$listNo' src='" . $dm_slides[$counter++] . "' name=''>
</div>";
$html .= "</div>";
}
I hope this will help for someone who searches solution like this
enter image description hereI have a table that displays a list of recipes from a database. Each recipe stores a rating out of 5. If no ratings has been submitted 'Not yet rated' will display. If a recipe has a rating, for example, 3, I would like 3 stars to appear. I have wrote jquery to try to achieve this but it works for the first recipe and not for the rest. For each recipe, more stars are printed. Any ideas where I'm going wrong?
if ($avg !=0)
{
define('RATE_RECIPE_MAX_STAR_RATING', 5);
$contentitems1 = "<form><div class='stars'>";
for ($i = 1; $i <= RATE_RECIPE_MAX_STAR_RATING; $i++)
{
//$contentitems1 .= '<input type="radio" style= "display:none;"
//$contentitems1 .= '<img class="rate_recipe_star" name="star_' . $i . '" id="star_' . $i . '" src="fadedstar.png" width="25" />';
$contentitems1 .= '<span class="fa fa-star-o star" name="star_' . $i . '" id="star_' . $i . '"></span>';
}
"</div></form>";
echo $contentitems1 .="<script type='text/javascript'> paint_the_stars($avg)
</script>";}
echo '<div class="star_' . $avg . '"></div>'?>
function paint_the_stars(howmany) {
var items = new Array();
$(".star").each(function() {
//var star = jQuery(this)
var star = $(this);
console.log(star);
var starno = $(star).attr('id').substring(5);
console.log(starno);
//console.log("Star:"+star);
if (starno <= howmany) {
//console.log("TRUE PRINT A STAR"+starno);
//$(this).attr('src', 'yellowstar.png');
var item = $(this).removeClass("fa-star-o").addClass("fa-star");
items.push(item);
} else {
//return true;
var item = $(this).removeClass("fa-star").addClass("fa-star-o");
items.push(item);
}
if (starno == 5) {
$.each(items, function(){
console.log(this);
$('.star_'+howmany).append(this);
});
return false;
}
})
}
I am trying to create custom links for all the individuals in a page. Each individual has a separate id. How can I create the links using GET parameter. The data is being pulled using JSON
Javascript
$.getInfo = function() {
var selected_reference_id = $.cookie("selected_reference_id");
$.ajax({
url: "assets/functions/editor.php",
type: "post",
data: {selected_reference_id: selected_reference_id},
success: function(data) {
var json_data = JSON.parse(data);
console.log(json_data);
console.log(json_data[0].profile_image_url);
$("#editor_name").html(json_data[0].name);
$("#profile_description").html(json_data[0].profile_description);
$("#profile_picture").html('<img alt="" id="profile_picture" src="' + json_data[0].profile_image_url + '" class="member-img">');
$("#main_video").html('<video id="MY_VIDEO_0" class="video-js vjs-default-skin" controls \n\
preload="none" width="640" height="264" poster="' + json_data[0].thumbnail_url + '"\n\
data-setup="{}">\n\
<source src="' + json_data[0].video_url + '" type="video/mp4">\n\
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>\n\
</video>');
$("#editor_tags").append(json_data[0].is_sports);
$("#editor_tags").append(json_data[0].is_weddings);
$("#editor_tags").append(json_data[0].is_travel);
$("#editor_tags").append(json_data[0].is_everyday_moments);
$("#editor_tags").append(json_data[0].is_special_occasions);
$("#editor_tags").append(json_data[0].is_motion_graphics);
$("#editor_tags").append(json_data[0].is_promo);
$("#editor_tags").append(json_data[0].is_tutorials);
$("#editor_tags").append(json_data[0].is_crowdfunding);
$("#editor_tags").append(json_data[0].is_collage);
$.each(json_data, function(index) {
//console.log(data[index].email);
var addRow = '<li class="mix all" style="margin-bottom: 6px;"><video id="MY_VIDEO_' + index + '" class="video-js vjs-default-skin" controls \n\
preload="none" width="100%" height="264" poster="' + json_data[index].thumbnail_url + '"\n\
data-setup="{}">\n\
<source src="' + json_data[index].video_url + '" type="video/mp4">\n\
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>\n\
</video></li>';
// var addRow = '<li class="mix webdesign">\n\
// <!-- <img src="themes/demo/assets/dream/images/work/thumbnail-01.jpg" alt=""/> -->\n\
// <video style="width: 100%; height: 100%" controls>\n\
// <source src="' + json_data[index].video_url + '" type="video/mp4">\n\
// <source src="' + json_data[index].video_url + '" type="video/ogg">\n\
// </video>\n\
// </li>';
if (index !== 0) {
$("#work-preview").append(addRow);
}
});
// $("#main_video").html('<video style="width: 40%; height: 40%" class="video" controls>\n\
// <source src="'+json_data[0].video_url+'" type="video/mp4">\n\
// <source src="'+json_data[0].video_url+'" type="video/ogg">\n\
// </video>');
// if (json_reserve.alreadyReserved === 0) {
// $("#upload_row").show();
// $.timer(json_question[0].timeleft);
// } else {
// $.dialogAlreadyReserved(); //a function I defined to pop up a dialog
// $.throbberHide();
// }
}
});
};
$.getInfo();
PHP
<?php
$root = $_SERVER['DOCUMENT_ROOT'];
include_once($root . '/assets/functions/db_dream.php');
$response = array();
$selected_reference_id = $_REQUEST['selected_reference_id'];
$DB = new DB();
$db = $DB->connect();
$stmt1 = $db->prepare("SELECT * FROM editors LEFT JOIN profile_videos pv ON editor_email = email WHERE reference_id = :reference_id ORDER BY pv.priority");
$stmt1->bindValue(':reference_id', $selected_reference_id, PDO::PARAM_INT);
$stmt1->execute();
$results = $stmt1->fetchAll(PDO::FETCH_ASSOC);
foreach ($results as $row) {
$details = array();
$details["reference_id"] = $row['reference_id'];
$details["email"] = $row['email'];
$details["name"] = $row['name'];
$details["profile_description"] = $row['profile_description'];
$details["profile_image_url"] = $row['profile_image_url'];
$details["video_url"] = $row['video_url'];
$details["thumbnail_url"] = $row['thumbnail_url'];
$details["editor_email"] = $row['editor_email'];
$details["priority"] = $row['priority'];
if($row['is_sports']){
$details["is_sports"] = "<a class='button_custom small' style='margin-right: 5px' >EXTREME SPORTS</a>";
}else{
$details["is_sports"] = "";
}
if($row['is_weddings']){
$details["is_weddings"] = "<a class='button_custom small' style='margin-right: 5px'>WEDDINGS</a>";
}else{
$details["is_weddings"] = "";
}
if($row['is_travel']){
$details["is_travel"] = "<a class='button_custom small' style='margin-right: 5px'>TRAVEL</a>";
}else{
$details["is_travel"] = "";
}
if($row['is_everyday_moments']){
$details["is_everyday_moments"] = "<a class='button_custom small' style='margin-right: 5px'>EVERYDAY MOMENTS</a>";
}else{
$details["is_everyday_moments"] = "";
}
if($row['is_special_occasions']){
$details["is_special_occasions"] = "<a class='button_custom small' style='margin-right: 5px'>SPECIAL OCCASIONS</a>";
}else{
$details["is_special_occasions"] = "";
}
if($row['is_motion_graphics']){
$details["is_motion_graphics"] = "<a class='button_custom small' style='margin-right: 5px'>MOTION GRAPHICS</a>";
}else{
$details["is_motion_graphics"] = "";
}
if($row['is_promo']){
$details["is_promo"] = "<a class='button_custom small' style='margin-right: 5px'>PROMOS</a>";
}else{
$details["is_promo"] = "";
}
if($row['is_tutorials']){
$details["is_tutorials"] = "<a class='button_custom small' style='margin-right: 5px'>TUTORIALS</a>";
}else{
$details["is_tutorials"] = "";
}
if($row['is_crowdfunding']){
$details["is_crowdfunding"] = "<a class='button_custom small' style='margin-right: 5px'>CROWDFUNDING</a>";
}else{
$details["is_crowdfunding"] = "";
}
if($row['is_collage']){
$details["is_collage"] = "<a class='button_custom small' style='margin-right: 5px'>PHOTO COLLAGE</a>";
}else{
$details["is_collage"] = "";
}
array_push($response, $details);
}
echo json_encode($response);
The code below generates and loops a randomized number of iterations of some .ogg files. They play as soon as the page loads.
The commented-out bits are my attempt to add a 'start' button. What am I doing wrong here, and how can I start this with a button rather than on page load?
(Also: I am suspecting that it is bad practice to combine php and javascript as I have done. I did it because randomization in php is so easy, and I am still new to js/jquery.)
(EDIT: see the edit below. I just forgot to close the tag.)
<html>
<head>
<title>Audio Testing</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<?php
$randC = rand(2,4);
$C = $randC * 4;
$G = $C / 2;
echo "
<script type=\"text/javascript\">
$(document).ready(function()
{
// $(\"#start\").click(function()
// {
var time = 0;
var riff_time = 2920;
var base = 'riff';
for(i = 0; i < $C; i++)
{
var id = base + ((i + 1) );
window.setTimeout (\"document.getElementById('\" + id + \"').play()\", time);
time += riff_time;
}
var timeG = 0;
var riff_time = 2920;
var baseG = 'riffG';
for(iG = 0; iG < $G; iG++)
{
var idG = baseG + ((iG + 1) );
window.setTimeout (\"document.getElementById('\" + idG + \"').play()\", timeG);
timeG += riff_time;
// }
} // EDIT: This should be }); ... that fixes it.
});
</script>
"?>
<style type="text/css">
</style>
</head>
<body style="background-color: #999;">
<!--<button id="start">Start</button>
<br> -->
<?php
echo "C:<br>";
for ($i=1; $i<= $C; $i++) {
echo '<audio controls id="riff'.$i.'">
<source src="loopC.ogg" type="audio/ogg">
</audio>';
}
echo "<br>G:<br>";
for ($i=1; $i<= $G; $i++) {
echo '<audio controls id="riffG'.$i.'">
<source src="loopG.ogg" type="audio/ogg">
</audio>';
}
?>
</body>
</html>
You can give a class start as well as and data-id to the start buttons.
So your html for start button would be like,
<img src="start-button.jpg" class="start" data-id="riff1">
//So this is start button for audio elementwith id riff1.
How will this work?
$('.start').click(function(){
$("#"+$(this).data('id')).play(); //This should do.
}
And yes in your php file should be type of this,
<!DOCTYPE html>
<html>
<head>
<title>Audio Testing</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<?php
$randC = rand(2,4);
$C = $randC * 4;
$G = $C / 2;
<script type="text/javascript">
$(document).ready(function()
{
// $("#start").click(function()
// {
var time = 0;
var riff_time = 2920;
var base = 'riff';
<?php for(i = 0; i < $C; i++)
{
echo " var id = base + ((i + 1) );
window.setTimeout (\"document.getElementById('\" + id + \"').play()\", time);
time += riff_time; ";
}
?>
var timeG = 0;
var riff_time = 2920;
var baseG = 'riffG';
<?php for(iG = 0; iG < $G; iG++)
{
echo " var idG = baseG + ((iG + 1) );
window.setTimeout (\"document.getElementById('\" + idG + \"').play()\", timeG);
timeG += riff_time; ";
// } ?>
}
});
</script>
<style type="text/css">
</style>
</head>
<body style="background-color: #999;">
<!--<button id="start">Start</button>
<br> -->
<?php
echo "C:<br>";
for ($i=1; $i<= $C; $i++) {
echo '<audio controls id="riff'.$i.'">
<source src="loopC.ogg" type="audio/ogg">
</audio>';
}
echo "<br>G:<br>";
for ($i=1; $i<= $G; $i++) {
echo '<audio controls id="riffG'.$i.'">
<source src="loopG.ogg" type="audio/ogg">
</audio>';
}
?>
</body>
</html>
I have this slider and it works fine in IE and chrome but has a problem in firefox, it loads all the picture one time but it does not go back again and load them, in the console i get this error
"SyntaxError: missing ] after element lis" in the line of setTimeout(func,900)
this is the code
function pic_loader() {
//alert('s');
var func = new function () {}
$folder = $('#foldername').attr('value');
$files = document.getElementById('filename').value;
$num = document.getElementById('num').value;
$filenames = $files.split("##");
var $img = [];
var $link = [];
if ($num > 1) {
for ($i = 1; $i <= $num; $i++) {
$img[$i] = $folder + "/" + $filenames[$i];
if ($i == 1) {
$link[$i] = "<img id='slide[" + $i + "]' width=380 src=" + $img[$i] + ">";
$("#load_here").append($link[$i]);
$first = document.getElementById('slide[1]');
$first.style.display = "none";
$($first).fadeIn(800);
} else {
$link[$i] = "<img id='slide[" + $i + "]' width=380 src=" + $img[$i] + " style='display:none'>";
$("#load_here").append($link[$i]);
}
}
$i = 1;
var $loop = setInterval(function () {
//alert('x');
$j = $i + 1;
$current = document.getElementById('slide[' + ($i++) + ']');
$next = document.getElementById('slide[' + ($j) + ']');
$($current).fadeOut(800, function () {
$($next).fadeIn(800);
});
if ($j > $num) {
$($next).fadeOut(800);
setTimeout(func, 900);
function func() {
clearInterval($loop);
$("#load_here").html("");
pic_loader();
}
}
}, 4500);
} else {
$i = 1;
$img[$i] = $folder + "/" + $filenames[$i];
$link[$i] = "<img id='slide[" + $i + "]' width=380 src=" + $img[$i] + ">";
$("#load_here").append($link[$i]);
}
}
There is no syntax error in the code you pasted. It must be elsewhere. Paste it into jsfiddle, it does not throw a syntax error.
First of all, id attribute cannot contains [ or ] character.
You can use name atrribute in place od id or create id like slide_1,slide_2,....
Using name attribute you can use function like :
$current = document.getElementsByName('slide[' + ($i++) + ']');
This post can help you more about your problem Accessing an array of HTML input text boxes using jQuery or plain Javascript