If you go here and immediately press the left-most image, and press the play button, it doesn't play. I tested this on Chrome. It works properly on Firefox.
The replit project has 6 files. 3 are the mp3 files, and the rest is an HTML, JS and CSS file.
Here is the code:
// gerates a img button, which gives a modal with the audio
// WARNING! Make sure the variable name doesn't have spaces, because it will be
// the actual HTML class
var make_audio_img_modal = function (img_file_name, audio_file_name, name){
// append to img parent div
var img_parent = document.getElementById("display-img-parent")
img_parent.innerHTML += `<img src="${img_file_name}" alt="${name}" class="display-img" onclick="document.getElementsByClassName('modal-link')[${document.getElementsByClassName('modal-link').length}].click();">`
// append to modal link div
var modal_link = document.getElementById("modal-links")
modal_link.innerHTML += `<p><a class="modal-link" href="#${name}-modal" rel="modal:open"></a></p>`
// append to modal div
var modals = document.getElementById("modals")
modals.innerHTML += `<div id="${name}-modal" class="modal">
<p style="text-align: center;"><audio controls preload="auto" class="audio" preload="false">
<source src="${audio_file_name}" type="audio/mpeg">
Your browser does not support the audio element.
</audio></p>
</div>`
var audio_element = document.createElement("AUDIO")
audio_element.setAttribute("src",audio_file_name);
modals.appendChild(audio_element)
// back to the top
// window.scrollTo(0, 0)
}
// make display image and audio modal
// gets the job done easily
window.onload = function(){
make_audio_img_modal(
"https://upload.wikimedia.org/wikipedia/en/thumb/7/7e/International_Monetary_Fund_logo.svg/1200px-International_Monetary_Fund_logo.svg.png",
"https://snowworthybackground.me90.repl.co/music-1.mp3",
"1")
make_audio_img_modal(
"https://upload.wikimedia.org/wikipedia/en/thumb/7/7e/International_Monetary_Fund_logo.svg/1200px-International_Monetary_Fund_logo.svg.png",
"https://snowworthybackground.me90.repl.co/music-2.mp3",
"2")
make_audio_img_modal(
"https://upload.wikimedia.org/wikipedia/en/thumb/7/7e/International_Monetary_Fund_logo.svg/1200px-International_Monetary_Fund_logo.svg.png",
"https://snowworthybackground.me90.repl.co/music-3.mp3",
"3")
}
img{
width: 100px;
}
.display-img{
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">
</script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css">
</head>
<body>
<div id="display-img-parent"></div>
<div id="modal-links"></div>
<div id="modals"></div>
</body>
</html>
music-1.mp3: https://snowworthybackground.me90.repl.co/music-1.mp3
music-2.mp3: https://snowworthybackground.me90.repl.co/music-2.mp3
music-3.mp3: https://snowworthybackground.me90.repl.co/music-3.mp3
How do I make it so that the audio file loads immediately after I go there?
Related
I am setting op a quick presentation where i need to show two advertisements,
I load the videoJs player with all dependencies and to links to click
<!-- Load dependent stylesheets. -->
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video-js.min.css" />
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.css" />
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/dist/videojs.ima.css" />
<video id="content_video" class="video-js vjs-default-skin"
controls preload="auto" width="780" height="440">
<source src="https://storage.googleapis.com/gvabox/media/samples/android.mp4"
type="video/mp4" />
</video>
<div onclick="Select(2)">ad 1</div>
<div onclick="Select(1)">ad 2</div>
<!-- Load dependent scripts -->
<script src="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.min.js"></script>
<script src="//googleads.github.io/videojs-ima/dist/videojs.ima.js"></script>
with this I use the following JS
var player = videojs('content_video');
function Select(number) {
if (number == 1) {
var options = {
id: 'content_video',
adTagUrl: 'ad1.xml'
};
player.ima(options);
player.load();
}
if (number == 2) {
var options = {
id: 'content_video',
adTagUrl: 'ad2.xml'
};
player.ima(options);
player.load();
}
}
now when the page loads it plays the default android video
when I click on ad1 the player reloads and player with the ad
however when i click on the second ad (not necessary in that order) I get an error
Uncaught TypeError:player.ima is not a function
I understand that I can only load the player.ima once, so how would I in that case update the options and reload the player so I can switch between the ads.
It is because player.ima cannot be called more than one time. The first time you click is working because the ima is only called once. Second time ima already exists.
You may refer to following github link for more details.
https://github.com/videojs/videojs-contrib-ads/issues/345
I'm doing an SDD assessment and I'm making a website kind of game. It will be a choose your own adventure game and I'm trying to incorporate JavaScript. I have 3 buttons that will take the user to different pages and I would like each of the buttons to make a sound when they're clicked. The buttons are text with a sword image above them, so I'd like a sword sound to play. However, I'm not experienced with JavaScript. I found some code for it at https://www.daniweb.com/programming/web-development/threads/286059/play-sound-when-a-link-is-clicked
but it means nothing to me cause I don't know how to use it. Would someone be able to explain to me what it means and how to adapt it to my HTML and CSS?
Here's my HTML code
<html>
<head>
<meta charset="UTF-8">
<title>SDD Minor Project Code</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/js" href="script.js">
</head>
<body>
<div class="home_sword">
<a href="https://trinket.io/html/c11627b947?outputOnly=true&runMode=autorun">
<img id="home_button_img" src="button_underline_sword_left.png">
<h2><i>Home</i></h2>
</a>
</a>
</div>
<div>
<img class="left_shield" src="shield_title_bookend.png">
<h1 class="story_title"><i>Viking Attack</i></h1>
<img class="right_shield" src="shield_title_bookend.png">
</div>
<img class="scroll" src="story_scroll.png">
<div class="narrative">
<p>Hello, World!</p>
</div>
</body>
</html>
Here's an exemple of what i made on one of my projects when i was learning JavaScript
<script>
function soundAlarm() {
let amount = 3; // count of sound you want here is set on 3 but you can change it as much you want
let audio = new Audio("Timer_Sound_Effect.mp3"); //here variable for the src of the sound
function playSound() { // function that plays the sound
audio.pause();
audio.currentTime = 0;
audio.play();
}
for (let i = 0; i < amount; i++) { // loop to play as many times you asked in "let amount "
setTimeout(playSound, 1200 * i); // 1200 = 1200 mseconds between each times the sound plays.
}
}
</script>
In html just put as attribute to play it:
<html>
<head>
</head>
<body>
<div>
<img class="left_shield" src="shield_title_bookend.png" onclick="soundAlarm()"> <!-- function called on the click to play the sound-->
<h1 class="story_title"><i>Viking Attack</i></h1>
<img class="right_shield" src="shield_title_bookend.png" onclick="soundAlarm()"> <!-- function called on the click to play the sound-->
</div>
</body>
</html>
Here's your code with the modifications :) :
<html>
<head>
<meta charset="UTF-8">
<title>SDD Minor Project Code</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/js" href="script.js">
</head>
<body>
<div class="home_sword">
<a href="https://trinket.io/html/c11627b947?outputOnly=true&runMode=autorun">
<img id="home_button_img" src="button_underline_sword_left.png">
<h2><i>Home</i></h2>
</a>
</a>
</div>
</a>
</a>
</div>
<div>
<img class="left_shield" src="shield_title_bookend.png" onclick="soundAlarm()"> <!-- function called on the click to play the sound-->
<h1 class="story_title"><i>Viking Attack</i></h1>
<img class="right_shield" src="shield_title_bookend.png" onclick="soundAlarm()"> <!-- function called on the click to play the sound-->
</div>
<img class="scroll" src="story_scroll.png">
<div class="narrative">
<p>Hello, World!</p>
</div>
</body>
<script>
function soundAlarm() {
let amount = 3; // count of sound you want here is set on 3 but you can change it as much you want
let audio = new Audio("Timer_Sound_Effect.mp3"); //here variable for the src of the sound, change it by the path of your file, or directly by your file name if in same folder.
function playSound() { // function that plays the sound
audio.pause();
audio.currentTime = 0;
audio.play();
}
for (let i = 0; i < amount; i++) { // loop to play as many times you asked in "let amount "
setTimeout(playSound, 1200 * i); // 1200 = 1200 mseconds between each times the sound plays.
}
}
</script>
</html>
I am trying to duplicate Expanding Text Areas Made Elegant
Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.
I have this in my index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
</body>
</html>
And my test.js looks like:
This doesn't really works.
However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
<script>
function makeExpandingArea(container) {
var area = container.querySelector('textarea');
var span = container.querySelector('span');
if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
// IE8 compatibility
area.attachEvent('onpropertychange', function() {
span.innerText = area.value;
});
span.innerText = area.value;
}
// Enable extra CSS
container.className += ' active';
}var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;while (l--) {
makeExpandingArea(areas[l]);
}
</script>
</body>
</html>
You're not actually using onload
Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.
When you include it in the <head> it runs before any elements exist. That's why the position of it matters.
In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.
I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.
try this in your code:
I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side
html code:
<html>
<body>
<table>
<tr>
<td>Description:</td>
<td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
<td></td>
</tr>
</table>
//css-code required inside html:
<style>
textarea.form-control {
height: auto;
resize: none;
width: 300px;
}
</style>
</body>
</html>
On my website's homepage, I'm looking to incorporate a rotating banner.
I have a selection of images (4), which currently change every 5 seconds.
However, what I would really like is to develop something similar to what Oracle has done - http://www.oracle.com/index.html
You can see their banner is made up of 3 parts:
1) The main image in the middle.
2) A header - that displays an icon for each image.
3) A footer which is by default hidden, but slides up upon a selection.
Any ideas of how I could even get started? I am using HTML and jQuery.
Thanks
Update 29-05-13
Apologies forgot to upload my current code:
HTML:
function rotateBanners(elem) {
var active = $(elem+" img.active");
var next = active.next();
if (next.length == 0)
next = $(elem+" img:first");
active.removeClass("active").fadeOut(200);
next.addClass("active").fadeIn(200);
}
function prepareRotator(elem) {
$(elem+" img").fadeOut(0);
$(elem+" img:first").fadeIn(0).addClass("active");
}
function startRotator(elem) {
prepareRotator(elem);
setInterval("rotateBanners('"+elem+"')", 2500);
}
#rotator img { position: absolute; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<link href="rotate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
$(window).load(function() {
startRotator("#rotator");
})
</script>
</head>
<div id="rotator">
<img src="https://dummyimage.com/600x400/000000/fff&text=1" />
<img src="https://dummyimage.com/600x400/000000/fff&text=2" />
<img src="https://dummyimage.com/600x400/000000/fff&text=3" />
<img src="https://dummyimage.com/600x400/000000/fff&text=4" />
</div>
I am trying to create an HTML5 video player without the default controls that will play/pause by simply clicking the video(or overlaying div). I want to hide the default controls completely. I want the user to only be able to pause/play by clicking on the video. Is this possible? My initial strategy was to overlay a transparent div above the element that would serve as my play/pause button. Below is the HTML and javascript I started, but need a little bit of help. Thanks everyone!
<!-- Video -->
<div style="height:980px;height:540px;">
<div style="z-index:100;position:absolute;">
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true">
<source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</div>
<div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div>
</div>
<!-- end Video -->
<!-- JAVASCRIPT FOR VIDEO PLAYER -->
<script type="text/javascript">
var videoEl = $('#myVideo');
playPauseBtn = $('#imgPoster');
playPauseBtn.bind('click', function () {
if (videoEl.paused) {
videoEl.play();
} else {
videoEl.pause();
}
});
videoEl.removeAttribute("controls");
</script>
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->
There's no need for two id attributes in the video tag, and there's no need for a separate source tag if only using one file format, and the video and poster you are linking to does not exist.
Anyway, example below:
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4">
</video>
<script type="text/javascript">
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
</script>
EDIT: adding a fiddle : http://jsfiddle.net/SKfBY/
Had a quick look at your site, and the video is cool :-)
If you look closely you'll see that there are two jQuery files added, not really the problem here, but you only need one, the second one will make your page load slower.
Also not the problem, but you should consider using the HTML5 doctype like below, as the video element is HTML5, but most browsers will figure it out anyway.
The problem seems to be my fault, jsFiddle automagically inserts the $document.ready function, and I forgot it in my example, that's why it's not working for you.
Here is a complete rundown of how I would write it, I removed both instances of jQuery for you and replaced with Google's version of jQuery, wich is usually a better option, and also you should probably remove any scripts that you don't need, like removing swfObject if the site does not contain any flash files using swfobject etc.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script>
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
});
</script>
</head>
<body>
<video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</body>
</html>
This code works for me:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("video1");
video.currentTime += value;
}
But setting the time to 0 rewound the video only; no playback. So I wanted the video to replay after rewinding, and came up with this:
function restart() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
}
else {
video.pause();
}
video.currentTime = 0;
video.play();
button.textContent = "||";
}
Here are the buttons:
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
My two-cent's worth...
Cheers