I am making a video website and so far I haven't styled it much yet so it's just videos on a blank page.
I have made it so that videos don't buffer until you click the thumbnail on the page. I added code to pause the video when you click it while it's playing and also play it again when it's clicked again.
I set it so the controls show on the HTML video but there's one problem. When you click on the video itself to pause it works fine, but when you click anything on the controls bar at the bottom it also pauses. And on top of that when you click the play/pause button on the actually control bar, the button pauses the video but it then instantly starts playing again because my function for playing when video is clicked fires.
How can I make it so the on click events don't work on the controls bar?
Another issue also is that when in fullscreen, the click on video to pause feature doesn't work at all. How do I fix that? I know that's quite a few questions in one post. Sorry :D
I looked everywhere and couldn't find answers. Heres my HTML and my JavaScript. The website is here: https://googledrive.com/host/0BxOngeQ9zGOeeHdlS3YyUFluVkk/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project Bluebar</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="javascript/vidloader.js"></script>
</head>
<body>
<noscript><h1>JavaScript is disabled! The page will not function properly.</h1><br><br></noscript>
<div id="1"><br><br><img class="video" onclick="vidcl('media/1.mp4', 'media/1.png', '1', '480', '480', 'i1', 'media/1mo.png');" id="i1" onmouseover="thumbch('i1', 'media/1mo.png');" onmouseout="thumbak('i1', 'media/1.png');" src="media/1.png" width="480" height="480"></div>
<div id="2"><br><br><img class="video" onclick="vidcl('media/2.mp4', 'media/2.png', '2', '640', '480', 'i2', 'media/2mo.png');" id="i2" onmouseover="thumbch('i2', 'media/2mo.png');" onmouseout="thumbak('i2', 'media/2.png');" src="media/2.png" width="640" height="480"></div>
<div id="3"><br><br><img class="video" onclick="vidcl('media/3.mp4', 'media/3.png', '3', '360', '360', 'i3', 'media/3mo.png');" id="i3" onmouseover="thumbch('i3', 'media/3mo.png');" onmouseout="thumbak('i3', 'media/3.png');" src="media/3.png" width="360" height="360"></div>
<div id="4"><br><br><img class="video" onclick="vidcl('media/4.mp4', 'media/4.png', '4', '400', '300', 'i4', 'media/4mo.png');" id="i4" onmouseover="thumbch('i4', 'media/4mo.png');" onmouseout="thumbak('i4', 'media/4.png');" src="media/4.png" width="400" height="300"></div>
</body>
</html>
and the JavaScript
var cs;
var no;
for(var x = 1; x < 5; x++){
no = x.toString();
cs = 'img' + no + ' = new Image(); img' + no + ".src = 'media/" + no + "mo.png';";
eval(cs);
}
var video;
var imgm;
var vidm;
var idm = '';
var widm;
var heim;
var imidm;
var hovimm;
function cla(){
video = document.getElementById('av');
if(video.paused){
video.play();
}else{
video.pause();
}
};
function vidcl(vid, img, id, wid, hei, imid, hovim){
if(idm !== ''){
document.getElementById(idm).innerHTML = '<br><br><img class="video" onclick="' + "vidcl('" + vidm + "', '" + imgm + "', '" + idm + "', '" + widm + "', '" +heim + "', '" + imidm + "', '" + hovimm + "');" + '" id="' + imidm + '" onmouseover="thumbch(' + "'" + imidm + "', '" + hovimm + "');" + '" onmouseout="thumbak(' + "'" + imidm + "', '" + imgm + "');" + '" src="' + imgm + '" width="' + widm + '" height="' + heim + '">';
}
vidm = vid;
imgm = img;
idm = id;
widm = wid;
heim = hei;
imidm = imid;
hovimm = hovim;
window.location.hash = id;
document.getElementById(id).innerHTML = '<br><br><video id="av" class="video" ondblclick="fs();" onclick="cla();" src="' + vid + '" width="' + wid + '" height="' + hei + '" autoplay loop controls>';
};
window.onkeydown = function(event){
video = document.getElementById('av');
if(event.keyCode === 32){
event.preventDefault();
if(video.paused){
video.play();
}else{
video.pause();
}
}
};
function thumbch(id, ims){
document.getElementById(id).src = ims;
};
function thumbak(id, ims){
document.getElementById(id).src = ims;
};
function fs(){
video = document.getElementById('av');
if(video.requestFullScreen){
video.requestFullScreen();
}else if(video.msRequestFullScreen){
video.msRequestFullScreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
}
};
I figured it out myself. I disabled the default video controls and the context menu so that they the controls can't be re-enabled through it and I made my own controls.
Related
<html>
<head>
<title>Doctor Page</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.onload = function callButtonClickEvent() {
setTimeout(function () { playSound(); }, 2000);
};
$( document ).ready(function() {
$('#source')[0].play();
});
function playSound() {
document.title = "(1) Doctor Page"
var filename = "eventually";
var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename + '.mp3">';
document.getElementById("sound").innerHTML = '<audio id="source">' + mp3Source + oggSource + embedSource + '</audio>';
}
</script>
</head>
<body>
<!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
<button id="btnplay" onclick="setTimeout(function(){ playSound(); }, 500);">Play</button>
<div id="sound"></div>
</body>
</html>
You're trying to use <audio id ="source"> before creating it. Move the content of playSound to the document.ready block (before $('#source')[0].play();), and the problem is solved (I hope...).
Sorry for my English if I made mistakes.
In my website the user is going to select an image, that image will then be inserted into a div tag. I need it so when the user clicks the image that was inserted into the div then it will be removed (deleted or hidden) from the div. I've tried:
document.getElementById("elementId").style.display = "none";
and other similar things. I really just cant get this to work please help!
HTML + JavaScript code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
var cardNumber = 1;
var deck = [];
var addCard = function(cardName)
{
if("undefined" != document.getElementById("card" + cardNumber).value)
{
if(deck.indexOf(cardName) > -1)
{
}
else
{
if(deck.length != 1)
{
deck.push(cardName);
document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = updateCards(' + cardName + ') src = "Images/Cards/' + cardName + '.png">';
cardNumber += 1;
}
if(deck.length >= 1)
{
cardNumber = 1;
}
}
}
}
</script>
</head>
<body>
<div id = "card1" class = "cards"></div>
<div id = "1">
<img class = "cardSize" onclick = "addCard('Archer')" src = "Images/Cards/Archer.png">
</div>
</body>
CSS Code:
.cards
{
height:150px;
width:125px;
float:left;
margin-left:6.2%;
margin-bottom:30px;
border:5px solid #ff6666;
background-color:#ff6666;
}
.cardSize
{
height:150px;
width:125px;
float:left;
margin-left:7%;
margin-top:30px;
}
You can delete the img by id.
Also fix the issue with the updateCards function:
document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = "updateCards(\'' + cardName + '\')" src = "' + cardName + '.png">';
For example,
<div id="card1" class="cards">
<img id="Archer" class="deckCardSize" onclick="updateCards('Archer')" src="Archer.png">
</div>
Then just remove the div with id="Archer":
document.getElementById("Archer").remove();
FYI, I added a simple updateCards function that just hides the img instead of removing it entirely :
var updateCards = function(cardName) {
document.getElementById(cardName).style.display = 'none';
}
You need to attach a click event listener to a class that is applied to all inserted images. the function that the listener fires would then apply css.style.display = "none" to this
First, remove all spaces between attributes and its values (I mean everywhere in your code), that is:
<div id="card1" class="cards"></div><!-- correct -->
<div id = "card1" class = "cards"></div><!-- incorrect -->
Second, you have an error in your code here:
document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = updateCards(' + cardName + ') src = "Images/Cards/' + cardName + '.png">';
You have missed double quotes around onclick's value. Replace it with this:
document.getElementById("card" + cardNumber).innerHTML = '<img id="' + cardName + '" class="deckCardSize" onclick="updateCards(' + cardName + ')" src="Images/Cards/' + cardName + '.png">';
Also, you have to define function updateCards(name), it maybe empty, but it must exists. If it doesn't exists, than any javascript code will stops running after you clicked on that image.
Third, <div id = "1"> has an error too. id attribute must starts from a letter.
here is working code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
var cardNumber = 1;
var deck = [];
function addCard(cardName) {
if ("undefined" != document.getElementById("card" + cardNumber).value) {
if (deck.indexOf(cardName) > -1) {
} else {
if (deck.length != 1) {
deck.push(cardName);
document.getElementById("card" + cardNumber).innerHTML = '<img id="img' + cardName + '" class="deckCardSize" onclick="updateCards(\'' + cardName + '\')" src="Images/Cards/' + cardName + '.png">';
cardNumber += 1;
}
if (deck.length >= 1) {
cardNumber = 1;
}
}
}
}
function updateCards(cardName) {
//some work
document.getElementById("img" + cardName).remove();
}
</script>
</head>
<body>
<div id="card1" class="cards"></div>
<div id="main1">
<img class="cardSize" onclick="addCard('Archer')" src="Images/Cards/Archer.png">
</div>
</body>
Tested and worked!
I have a script which gets images via AJAX and then displays them on the page in a div called #media-area, which has a fixed height and overflow: scroll;. With this, user's can select an image. On some pages, the image will already be selected. In this case I want the div to scroll so the selected image is positioned along the top.
$.ajax({
url: 'index.php?c=media&m=media_ajax',
success: function (res) {
for (var index in res) {
var me = res[index];
var html = '<div class="col-md-3"><input type="radio" name="medialibrary" id="medialibrary' + me.id + '" value="' + me.id + '">';
html += '<label for="medialibrary' + me.id + '">';
html += '<img src="/image.php?image=' + me.image + '&thumbnail=122,122" alt="' + me.name + '" id="img_medialibrary' + me.id + '" width="122" height="122">';
html += '</a>';
html += '</div>';
$("#media-area").append(html);
$("#medialibrary" + me.id).change(function () {
window.selected = $(this).val();
$("#ml_selected").val($(this).val());
$("#clear-selection").removeAttr('disabled');
$("#upload").hide();
});
if ($("#ml_selected").val() == me.id) {
$("#clear-selection").removeAttr('disabled');
$("#upload").hide();
$("#medialibrary" + me.id).attr('checked', 'checked');
}
}
$('#media-area input').each(function () {
var radioInput = $(this);
if (radioInput.is(':checked')) {
var radioIMG = $("#img_" + radioInput.attr('id'));
$('#media-area').animate({
scrollTop: radioIMG.offset().top
}, 2000);
}
});
}
});
I can get the div to scroll, but it won't be anywhere near the selected div. I'm guessing this is because the images haven't fully loaded when scroll event is fired. How would I go about running this event to scroll to the selected item after all images have been loaded in via AJAX?
I found this question how to add pinterest hover button to FancyBox2
fancbybox pinterest jQuery
which works great, I just couldn't solve how to add description to the pin?
var pinUrl = a.attr('href') + '?url='+ encodeURIComponent(location.href)
+ '&media='+ encodeURIComponent(img.attr('src'))
+ '&description=' (what goes here??);
Not familiar with the API, but to appropriately add a description parameter and keep it encoded, you would do:
var pinUrl = a.attr('href') + '?url='+ encodeURIComponent(location.href)
+ '&media='+ encodeURIComponent(img.attr('src'))
+ '&description=' + encodeURI('I am some string of text');
Abstracting this:
function pinUrl(link, img, description) {
return link.attr('href') + '?url=' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(img.attr('src')) + '&description=' + encodeURI(description);
}
// Usage:
var myPinUrl = pinURL($("#somelink"), $("#someimage"), "Look at this cool text!");
// EDITED:
If you have a set of links with variable information, you might use the pinUrl function like so:
var pin_url_list = [];
$("#mydiv a").each(function() {
pin_url_list.push( pinUrl( $(this), $(this).find("img.featured"), $(this).attr("title") );
});
Another way to do it:
You could get the description from the title attribute of your link (or use a data-caption attribute) like :
$(".fancybox").fancybox({
helpers: {
title: {
type: 'inside'
}
},
beforeShow: function () {
this.title = this.title ?
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.location.href) +
'&media=' + encodeURIComponent(this.href) +
'&description=' + this.title + '" class="pin-it-button" count-layout="horizontal">' +
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>' +
'<span> ' + this.title + '</span></div>'
:
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.location.href) +
'&media=' + encodeURIComponent(this.href) +
'&description='+$(this.element).data("caption")+'" class="pin-it-button" count-layout="horizontal">' +
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>' +
'<span> </span></div>'
}
});
JSFIDDLE
I'm a beginner of JavaScript. I want to play a mp4 file from a specific time for a certain time in HTML5. First, I want to load a thumbnail image. And if it is clicked, I'd like to play the video file from the particular time. This is my code. But it doesn't start from 6. It just starts from the beginning. What did I do wrong?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function PlayVideo(anchor,vid, start_time, end_time, video_file) {
document.getElementById(anchor).outerHTML =
"<video id='" + vid + "' controls width='320'> <source src='" + video_file + "'
type='video/mp4'/></video>"
var video = document.getElementById(vid);
video.play();
video.currentTime = start_time;
video.addEventListener('timeupdate', function() {
if(this.currentTime > end_time) {
this.pause();
this.currentTime = start_time;
}
});
document.getElementById(aid).style.display = "none";
}
</script>
</head>
<body>
<a id="anchor" onclick="PlayVideo('anchor','003', 5, 9, 'test.mp4');"><img src ="test.jpg" alt="trail" /></a>
</body>
</html>
try
document.getElementById(anchor).outerHTML =
"<video id='" + vid + "' controls width='320'> <source src='" + video_file + "'
type='video/mp4'/></video>";
Notice the
;