I have been scratching my head for a few days now with this one. Just trying to get better at javascript but no one seems to be able to figure out what I am doing wrong here.
What I want is to create a data structure or array containing videos
On page load I would like a random video to be loaded and begin playing
After this I would like the user to be able to click the video to initiate the math.random and generate a new video in its place.
Issues -
1 - With the code I have whenever I click to randomize the video just disappears no console errors or anything.
2 - The page doesn't randomize on load
3 - I am not sure if this is the best way to go about as far as data structure is concerned?
This doesn't seem logically like a hard problem to solve but for me its been a real head scratcher.
Any help is greatly appreciated!!
HTML
<a href="#" class="click">
<section>
<div>
<video loop autoplay>
<source src="videos/1.webm" type="video/ogg">
<source src="videos/1.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
</div>
</section>
</a>
JavaScript
//Array of Videos
var videos = [
[{type:'mp4', 'src':'videos/1.mp4'}, {type:'webm', 'src':'videos/1.webm'}],
[{type:'mp4', 'src':'videos/2.mp4'}, {type:'webm', 'src':'videos/2.webm'}],
];
//onClick + Action
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
var randomIndex = parseInt(Math.random()*videos.length);
$(this).find('videos').append('<source src="'+videos[randomIndex]+'" />');
});
});
//onLoad Randomize
function getRandomVideo() {
var number = Math.floor(Math.random()*video.length);
document.write('<source src="'+videos[number]+'" />');
}
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
console.log("hello world");
var number = Math.floor(Math.random()*videos.length);
$(this).html('<source src="'+videos[number]+'" />');
});
});
Here is working pen http://codepen.io/easingthemes/pen/PwWRdx
<a> tag will break on some browsers around block elements. You don't need <a>.
You need videos[number][index].src because videos[number] is an object.
Also you need to reload video when you change src
$('video').load();
$('video').play();
HTML
<section>
<div>
<video loop autoplay>
<source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/ogg">
Your browser does not support the <code>video</code> element.
</video>
</div>
</section>
JS
var videos = [
[{type:'mp4', 'src':'http://techslides.com/demos/sample-videos/small.mp4'}, {type:'webm', 'src':'http://techslides.com/demos/sample-videos/small.webm'}],
[{type:'mp4', 'src':'http://html5demos.com/assets/dizzy.mp4'}, {type:'webm', 'src':'http://html5demos.com/assets/dizzy.webm'}],
];
$(function() {
$('section').on('click', 'div', function(e) {
var number = Math.floor(Math.random()*videos.length);
$(this).find('source').each(function(index){
videoSrc = videos[number][index].src;
$(this).attr('src', videoSrc);
$('video').load();
$('video').play();
});
});
});
Ok this is an array of array of objects this is a function to change the 1st and second src and type
function getRandomVideo(videos) {
var number = Math.floor(Math.random()*videos.length);
$('.click video source').eq(0).attr('type',videos[number][0].type).attr('src',videos[number][0].src);
$('.click video source').eq(1).attr('type',videos[number][1].type).attr('src',videos[number][1].src);
$('.click video').load();
$('.click video').play();
}
DEMO use this function in any event you want
Related
This is my JavaScript file and I want to use this to mute something in my html file on the press of a button
//checks if its muted or not
var muteCheck = 1;
//function to mute and unmute
function mute() {
muteCheck = muteCheck + 1;
if (muteCheck % 2 === 0) {
document.getElementById("music").muted = true;
} else if (muteCheck % 2 === 1) {
document.getElementById("music").muted = false;
}
}
This is what my html file looks like
<body>
<audio autoplay loop>
<source src="audio/something.mp3" id="music">
</audio>
<button type="button" id="muteButton" onclick="mute()">mute</button>
<script src="variablesAndFunctions.js" type="text/javascript">
mute()
</script>
</body>
I opened it in Chrome, nothing happens when I press the button, nothing prints in the console or anything. I am new to coding so I don't know what I did wrong.
Any help would be appreciated thanks :D
You are setting muted on the <source>, not <audio>. The question has been edited but I believe this is the only remaining error.
You are toggling the muted property of the <source> element, but this is meaningless.
The property applies to the <audio> element.
document.getElementById("music").parentNode.muted
That change would help
<audio autoplay="autoplay" loop="loop" id="music" >
<source src="audio/something.mp3" >
</audio>
Insert this, it comes with the mute control you are look for no js required
I'm trying to randomize some videos that are both .webm and .mp4.
I have a two of each video for instance vid1.webm and vid1.mp4
I'd like to have the videos randomize and pull both at the same time into the video tag.
safari doesn't support .webm so that's why i would like to have .mp4 as a backup and need both to randomize into the browser on click.
I am loading them from an array and also can't figure out how the folder structure should be listed out, I would really like to keep them in an array as I am loading in several hundred
var randomImage = new Array();
randomVideo[0] = "videos/1.webm/ or mp4"; //not sure how to do the file structure
randomVideo[1] = "videos/2.webm/ or mp4"; //
randomVideo[2] = "videos/3.webm/ or mp4"; //
//trying to figure out this part
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
var number = Math.floor(Math.random()*randomVideo.length);
$(this).html('<source src="'+randomVideo[number]+'" />');
});
});
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
var number = Math.floor(Math.random()*randomVideo.length);
$(this).html('<source src="'+randomVideo[number]+'" type="video/mp4" /> )
}
})
html
<a href="#" class="click">
<section>
<video controls autoplay>
<script>
randomVideo()
</script>
</video>
</section>
</a>
If anyone can help me figure this out it would be greatly appreciated!
Can't figure it out, still learning.
You have multiple issues. Firstly your array name doesn't match (randomImage and randomVideo). Not sure why you are hooking the click event twice. One approach is to store the common parts of the path in the array and then concatenate the file ending. Also, I have no idea what you were trying to do with the img tag...
Anyway, the code below should help you, if I have understood what you are trying to do correctly.
var randomVideo = new Array();
// define your common video paths here
randomVideo[0] = "videos/1";
randomVideo[1] = "videos/2";
randomVideo[2] = "videos/3";
function randomiseVideos() {
var number = Math.floor(Math.random() * randomVideo.length);
$('#myvid').empty(); // clean up from last time
// now add 2 sources (will fall back appropriately depending on client support)
$('#myvid').append('<source src="' + randomVideo[number] + '.webm" type="video/webm">');
$('#myvid').append('<source src="' + randomVideo[number] + '.mp4" type="video/mp4">');
}
$(function () {
// Randomise on page load
randomiseVideos();
// handle click on test link
$('a.click').click(function (e) {
e.preventDefault();
randomiseVideos();
});
});
HTML:
Test Link
<section>
<video id="myvid" width="320" height="240" controls autoplay></video>
</section>
JS fiddle demo
The video element supports multiple sources https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
A very simple solution would be to store a list of video objects in your array:
var videos = [
[{type:'mpg', 'src':'blah.mpg'}, {type:'webm', 'src':'blah.webm'}],
[{type:'mpg', 'src':'blah2.mpg'}, {type:'webm', 'src':'blah2.webm'}],
];
...
var video = videos[randomIndex];
And use that to output sources like:
<video controls>
<source src="blah.mpg" type="video/ogg">
<source src="blah.webm" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
There are 3 videos, placed in 3 separate div's.
There also are 3 separate div's, but in other position of a page (lets say contA and contB and contC).
I want that if I click on the video1, then video2 and video3 goes to contA and contB, and video1 goes to contC.
If I click video1 again, all videos go back to their original position.
If I click on video2 (while its in contA), then video1 goes to contA, video3 goes to contB, video2 goes to contC.
I have prepared a jsbin demo:
Jsbin DEMO
Anyone could help? Appreciated!
EDIT: (Added a code as requested)
HTML:
<div id="vid1">
<video id="Video1" class="videos">
<source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>
HTML5 Video is required for this example.
</video>
</div>
<div id="vid2">
<video id="Video2" class="videos">
<source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>
HTML5 Video is required for this example.
</video>
</div>
<div id="vid3">
<video id="Video3" class="videos">
<source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>
HTML5 Video is required for this example.
</video>
</div>
<div id="contA"><br>first container<br></div>
<div id="contB"><br>second container<br></div>
<div id="contC"><br>third container<br></div>
JavaScript:
$(window).load(function()
{
//add event for all videos
$('.videos').click(videoClicked);
function videoClicked(e)
{
//get a referance to the video clicked
var sender = e.target;
//get all the videos
var $videos = $('.videos');
$videos.appendTo('#contA');
$videos.appendTo('#contB'); //but I need each video to be put to different div: #contA, #contB...
$videos.not(sender).appendTo('#contC'); //if I put the clicked video into this container, it does not go back to original one.
}
});
Think this is what you're looking for, but it's based on the naming convention used in the example. I also took the liberty of renaming contA/contB and contC to cont1, cont2 and cont3, because it's easier to manipulate.
JSBin demo
//remember last video clicked (you could check last container instead)
var lastclicked;
function videoClicked(e)
{
//get a reference to the video clicked
var sender = e.target;
//get all the videos
var $videos = $('.videos');
if(sender==lastclicked){
//reset to original positions
$.each($videos,function(){
var ind = this.id.substring(this.id.length-1); //based on the video + number naming convention
$(this).appendTo('#vid' + ind);
});
lastclicked = null;
return;
}
lastclicked= sender;
var i = 1;
//place all non clicked videos in cont1/cont2/etc
$.each($videos.not(sender),function()
{
$(this).appendTo('#cont' + i++ );
});
//place the clicked video in the last container
$(sender).appendTo('#cont' + i ); //always cont3 with fixed divs, but this is dynamic in case you add more
}
});
I will edit this answer as the desired results become more clear but i think i can give you some info to get you going in the right direction.
the section of code "but i need each video to be put to a diff cont"
I would leverage a data attribute and let each control keep track of itself.
$video.each(function()
{
var targetdiv = $(this).data('origonal-div');
$(targetdiv.ToString()).append(this);
//optionally update the data value to keep track of the next location to append to.
}
if you need more info post some questions with an update on the jsbin so i can see where you are having trouble.
Cheers
Hi this is currently my code to play a song according to which image is selected:
Javascript
function Start (audioFile)
{
var audie = document.getElementById("myAudio");
audie.src = audioFile;
audie.play();
}
function Stop ()
{
var audie = document.getElementById("myAudio");
audie.pause();
}
HTML5
<img src="images/play.png" alt="Play Button width="37" height="30" onclick="Start('EL.mp3')">
How is it that i could show the HTML 5 audio player with all the controls as soon as the button is selected ? I would like to just have one control bar and everytime the playbutton is clicked the bar appears and maybe display the song that is currently playing .
First, i suggest using jquery for writing JavaScript.
HTML
<audio controls id="myAudio" style="display:none">
JavaScript
function Start (audioFile)
{
$("#myAudio").show();
...
}
function Stop ()
{
$("#myAudio").hide();
...
}
At the moment I have an image linked to a page with an onClick event to play a sound when clicked.
<div style="display:none;">
<audio id="audio1" src="SOUND.wav" controls preload="auto" autobuffer></audio>
</div>
<script> function EvalSound(soundobj)
{ var thissound=document.getElementById(soundobj); thissound.play(); }
</script>
<img src="IMAGE.png">
This works fine as is, but the sound is cut off by the page load. Assuming the "SOUND.wav" is 10 seconds long, how would I edit my code so that when the image is clicked, there is a 10 second pause while the sound plays, THEN it loads the page?
Thank you or your help.
You can change your code as follows:
<div style="display:none;">
<audio id="audio1" src="SOUND.wav" controls preload="auto" autobuffer></audio>
</div>
<script> function EvalSound(soundobj)
{ var thissound=document.getElementById(soundobj); thissound.play();
setTimeout( function() { window.location.href = 'PAGE.php'; }, 1000); } // change 1000 to whatever value you would want to wait in milliseconds.
</script>
<a href="#" onClick="EvalSound('audio1')"><img src="IMAGE.png"></a
>
Same as the answer before me, only I suggest you use the audio api to determine the duration of the sound and set it as the timeout.
Also, to change the url you could add it as an argument.
function EvalSoundAndRedirect(soundobj, url) {
var thissound = document.getElementById(soundobj);
thissound.play();
setTimeout(function() {
window.location.href = url;
}, thissound.duration);
}
Using:
<img src="IMAGE.png" />