I have got a
<input type="file" id="howtovideo" name="howtovideo" accept="video/mp4"> </span>
When its changed , i am calling the below function to play video dynamically
$("#howtovideo").on('change', function() {
loadVideo();
});
function loadVideo(){
alert('loadVideo called');
var newsrc = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
var video = document.getElementById('video');
var source = document.createElement('source');
source.setAttribute('src', newsrc);
video.appendChild(source);
video.play();
}
But nothing is happening and there are no errors in console demo.
Could you please let me know how to play vdeo dynamicaly ??
You don't need to add new source tag. Only set address of new video to src attribute of current source tag. Note that after changing src, you need to load video using .load() and then play video. Also if you have jQuery, use it to finding elements.
$("#howtovideo").on('change', function(){
loadVideo();
});
function loadVideo(){
var newsrc = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
$('#video > source').attr('src', newsrc);
$("#video")[0].load();
$("#video")[0].play();
}
Related
I'm making a random order video player, adapting code from here but the same video just keeps playing, even though I can see (from text above the video) that the random ordering is working. Live version is here.
Is the problem with the appendChild meaning the new video is end of a list but the first in list keeps playing? I tried replaceChild but that didn't work.
<script type="text/javascript">
$(document).ready(function(){
var videos = [
[{type:'mp4', 'src':'carlos/one-carlostest.mp4'}],
[{type:'mp4', 'src':'carlos/two-carlostest.mp4'}],
[{type:'mp4', 'src':'carlos/three-carlostest.mp4'}],
[{type:'mp4', 'src':'carlos/four-carlostest.mp4'}],
[{type:'mp4', 'src':'carlos/five-carlostest.mp4'}]
];
// selecting random item from array as first to be played
var randomitem = videos[Math.floor(Math.random()*videos.length)];
// This function adds a new video source (dynamic) in the video html tag
function videoadd(element, src, type) {
var source = document.createElement('source');
source.src = src;
source.type = type;
element.appendChild(source);
}
// this function fires the video for particular video tag
function newvideo(src){
var vid = document.getElementById("myVideo");
videoadd(vid,src ,'video/ogg');
vid.autoplay = true;
vid.load();
vid.play();
}
// function call
newvideo(randomitem[0].src)
// Added an event listener so that everytime the video finishes ,a new video is loaded from array
document.getElementById('myVideo').addEventListener('ended',handler,false);
function handler(){
var newRandom = videos[Math.floor(Math.random()*videos.length)];
newvideo(newRandom[0].src)
document.getElementById("monitor").innerHTML = "randomitem is " + newRandom[0].src;
}
})
</script>
Also, if anyone can tell me why the autoplay never works that'd be appreciated, though it's the least of my problems.
I have kinda found this solution for your video playing one after other. now in your JS file, now you just will need to add your video src path.
var vidElement = document.getElementById('video');
var vidSources = [
"https://lutins.co.uk/carlos/one-carlostest.mp4",
"http://www.w3schools.com/html/movie.mp4"
];
var activeVideo = Math.floor((Math.random() * vidSources.length));
vidElement.src = vidSources[activeVideo];
vidElement.addEventListener('ended', function(e) {
// update the active video index
activeVideo = (++activeVideo) % vidSources.length;
if(activeVideo === vidSources.length){
activeVideo = 0;
}
// update the video source and play
vidElement.src = vidSources[activeVideo];
vidElement.play();
});
video {
width:350px;
}
<p>wowww you got it!</p>
<video src="https://lutins.co.uk/carlos/one-carlostest.mp4" id="video" autoplay muted playsinline></video>
Change the randomIt variable into a callback, only this way, it will generate new random number each time it get call.
// I have change randomitem into a function with ofcourse a proper name
var getRandomItem = function() {
return videos[Math.floor(Math.random()*videos.length)];
}
You should also call it properly like this:
//newvideo(randomitem[0].src) -> change it to
newvideo(getrandomItem().src)
There might also other adjustments requires for your code to work.
I am working on a project where a sound plays when you mouseover an image and stops playing on mouseout. I want it to start over each time and there has to be multiple images on each page. I am looking for the most efficient way to make this code work. Here is the sample page: http://inventivewebdesign.com/audio-img/sound.html
Code:
<body>
<script>
function PlaySound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.pause();
thissound.currentTime = 0;
}
</script>
<a onmouseover="PlaySound('violin')" onmouseout="StopSound('violin')"><img src="violin.png"></a>
<a onmouseover="PlaySound('xy')" onmouseout="StopSound('xy')"><img src="xy.png" width="300px" height="300px"></a>
<a onmouseover="PlaySound('piccolo')" onmouseout="StopSound('piccolo')"><img src="piccolo.png"></a>
<audio id='piccolo' src='piccolo.wav'/>
<audio id='violin' src='violin.mp3'/>
<audio id='xy' src='xy.mp3'/>
</body>
This all works. My only question is how to make the code more efficient.
I saw that I should be able to do something like this:
<audio>
<source id='piccolo' src='piccolo.wav'>
<source id='violin' src='violin.mp3'>
<source id='xy' src='xy.mp3'>
</audio>
But it doesn't work. Is the first set of code above the best way to do it?
Good question #MattM. I would simply add a function to create new instances of the audio hovers, making make it easier to implement more sounds without code repetition.
function newHover(e){
var audio = new Audio(); // creates audio element
audio.src = e.audio; // the audios location
var image = new Image(); //creates the image element
image.src = e.image; // the images location
image.className = e.title; // applies the name of the instrument to both elements
audio.className = e.title;
image.addEventListener("mouseover", PlaySound); // listens for mouse movement
image.addEventListener("mouseout", StopSound);
document.body.appendChild(audio); // appends the audio and image to the body of the document
document.body.appendChild(image);
}
That way, the below code block is unnecessary:
<a onmouseover="PlaySound('violin')" onmouseout="StopSound('violin')">
<img src="violin.png">
</a>
<a onmouseover="PlaySound('xy')" onmouseout="StopSound('xy')">
<img src="xy.png" width="300px" height="300px">
</a>
<a onmouseover="PlaySound('piccolo')" onmouseout="StopSound('piccolo')">
<img src="piccolo.png">
</a>
<audio id='piccolo' src='piccolo.wav'/>
<audio id='violin' src='violin.mp3'/>
<audio id='xy' src='xy.mp3'/>
Implement this in your code, none of the HTML above is needed in this solution.
(Note: getElementById was changed to querySelector in PlaySound and PauseSound functions)
function PlaySound(e) {
var thissound = document.querySelector("audio." + e.target.className);
thissound.play();
}
function StopSound(e) {
var thissound = document.querySelector("audio." + e.target.className);
thissound.pause();
thissound.currentTime = 0;
}
function newHover(e){
var audio = new Audio();
audio.src = e.audio;
var image = new Image();
image.src = e.image;
image.className = e.title;
audio.className = e.title;
image.addEventListener("mouseover", PlaySound);
image.addEventListener("mouseout", StopSound);
document.body.appendChild(audio);
document.body.appendChild(image);
}
window.onload = function(){
newHover({
audio: "http://inventivewebdesign.com/audio-img/piccolo.wav", // Path to the audio file (the src property of audio tag)
image: "http://inventivewebdesign.com/audio-img/piccolo.png", // Path to the image file (the src property of the image tag)
title: "piccolo" // The name of the instrument (applied as a className to both the image and the audio elements)
});
newHover({
audio: "http://inventivewebdesign.com/audio-img/xy.mp3",
image: "http://inventivewebdesign.com/audio-img/xy.png",
title: "xy"
});
newHover({
audio: "http://inventivewebdesign.com/audio-img/violin.mp3",
image: "http://inventivewebdesign.com/audio-img/violin.png",
title: "violin"
});
}
a{
position: absolute;
}
img{
width: 100px;
}
<body>
<a>Hover over the images!</a>
</body>
In conclusion, your solution works effectively, However it would make it much easier for you to have a function to create the audio hovers for you.
I took a look at inventivewebdesign.com, very nice website there!
EDIT>>>>>>>>>>>>
Note - I have tested the script in Firefox and Chrome. It should work fine.
For clarification on how to use the function:
To insert an image. Call the newHover function Like so:
newHover({
audio: /*audio src here eg. music.wav*/,
image: /*image src here eg. picture.png*/,
title: /*title here eg. violin / xylophone / piccolo*/
});
The images will be inserted into the document. You can then apply css styles or do what ever else you want to them.
I am making a WebRTC application.
Basically I have this code:
rtc.onremotestream = function(event) {
//Want code to create a video tag in a specific <div> and then do this:
attachMediaStream([THAT NEW VIDEO TAG], event.stream);
}
How could I go about doing this? Autoplay needs to be true.
rtc.onremotestream = function(event) {
var videoTag = document.createElement('video');
document.getElementById('specific_div').appendChild(videoTag);
attachMediaStream(videoTag, event.stream);
}
Works?
Following is Function to embed youtube video in html.
In this youtube video display on click but I want to do this on load using javascript.
How can be done? Any help?
youtubeLoadVideos : function () {
// Find all the YouTube video embedded on a page
var videos = document.getElementsByClassName("youtube");
for (var i=0; i<videos.length; i++) {
var youtube = videos[i];
// Attach an onclick event to the YouTube Thumbnail
youtube.onclick = function() {
// Create an iFrame with autoplay set to true
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.id);
// The height and width of the iFrame should be the same as parent
iframe.style.width = this.style.width;
iframe.style.height = this.style.height;
iframe.style.clear = 'both';
// Replace the YouTube thumbnail with YouTube HTML5 Player
this.parentNode.replaceChild(iframe, this);
};
}
}
As you create it onload, just create a html tag:
<iframe src="https://www.youtube.com/embed/yourid"/>
Or use javascript, as there is only 1 should be loaded as default:
window.onload = function(){
var videos = document.getElementsByClassName("youtube");
if (videos.length > 0){
var youtube = videos[0];
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + youtube.id);
// The height and width of the iFrame should be the same as parent
iframe.style.width = youtube.style.width;
iframe.style.height = youtube.style.height;
iframe.style.clear = 'both';
// Replace the YouTube thumbnail with YouTube HTML5 Player
youtube.parentNode.replaceChild(iframe, youtube);
}
}
Another case, if you need to keep the onclick and load 1 video by default, just keep your code and write some more lines:
window.onload = function(){
var videos = document.getElementsByClassName("youtube");
if (videos.length > 0){
var youtube = videos[0]; //play the first video onload
youtube.click(); //trigger click programmatically, this will cause the event handler to be executed and insert an iframe.
}
}
I have the following code:
function playSound(source) {
document.getElementById("sound_span").innerHTML =
"<embed src='" + source + "' hidden=true autostart=true loop=false>";
}
<span id="sound_span"></span>
<button onclick="playSound('file.mp3');"></button>
Once you click play, the MP3 gets downloaded, than it starts to play. However, it can take a while if it has like 1 MB. What I need is a preloaded (just like you can do with the images). So when the page loads, the mp3 will be streamed and if, for instance, 10 seconds later, the user pressed the 'play' button, he won't have to wait until the mp3 gets downloaded first, as it is already streamed.
Any ideas? Thanks in advance for any tip!
You can preload using <audio /> for newer browsers. Set autoplay = false. For older browsers that don't support <audio />, you can use <bgsound />. To preload a sound, set the volume to -10000.
function preloadSound(src) {
var sound = document.createElement("audio");
if ("src" in sound) {
sound.autoPlay = false;
}
else {
sound = document.createElement("bgsound");
sound.volume = -10000;
}
sound.src = src;
document.body.appendChild(sound);
return sound;
}
That will get the sound in your browser's cache. Then to play it, you can keep doing what you are doing with <embed />. Or if you want to take advantage of HTML5 features, you can call .play() on the returned <audio /> element. You could even add a play method to the <bgsound />:
function loadSound (src) {
var sound = document.createElement("audio");
if ("src" in sound) {
sound.autoPlay = false;
}
else {
sound = document.createElement("bgsound");
sound.volume = -10000;
sound.play = function () {
this.src = src;
this.volume = 0;
}
}
sound.src = src;
document.body.appendChild(sound);
return sound;
}
Then use it like this:
var sound = loadSound("/mySound.ogg"); // preload
sound.play();
The only caveat is FireFox doesn't support mp3. You'll have to convert your files to ogg.
Working demo: http://jsfiddle.net/PMj89/1/
You can use the HTML5 <audio> element's preload attribute, and fall back on <embed>.