how to build a video-playlist that supports you-tube embedded videos?
i don't want page to be refreshed, just video changes dynamically if user clicks on another video,take a look at this for your reference.
Does any of jplayer/video-js/flowplayer etc support this feature?
If you're using video.js and the YouTube plugin you can update the source using the video.js API. You do need to specify the video/youtube type.
videojs("myPlayer").src({ type: "video/youtube", src: "http://www.youtube.com/watch?v=dQw4w9WgXcQ"});
Example: http://jsfiddle.net/mister_ben/g7mrs/
This is a JS trick. If you have a console to the browser (or firebug), you can see, it goes a JSON get request and response from the browser to the server and reverse. The server read out from the database, the correct embedded video, it sends to the browser, and that insert into the page DOM.
Try this example to dynamically change youtube src:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://vjs.zencdn.net/5.4.4/video-js.css"/>
</head>
<body>
<video
id="vid1"
class="video-js vjs-default-skin"
controls
width="640" height="264"
data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }'
>
</video>
<button id="change">change video</button>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>
<script
src="https://raw.githubusercontent.com/eXon/videojs-youtube/637a2916c2c4fd2b5fc55dafa3df923a92fec6d0/src/Youtube.js"></script>
<script>
(function ($) {
$(document).ready(function () {
// An example of playing with the Video.js javascript API
// Will start the video and then switch the source 3 seconds latter
// You can look at the doc there: http://docs.videojs.com/docs/guides/api.html
videojs('vid1').ready(function () {
var myPlayer = this;
myPlayer.src({type: 'video/youtube', src: 'https://www.youtube.com/watch?v=y6Sxv-sUYtM'});
$("#change").on('click', function () {
myPlayer.src({type: 'video/youtube', src: 'https://www.youtube.com/watch?v=09R8_2nJtjg'});
});
});
});
})(jQuery);
</script>
</body>
</html>
or see the discussion here: https://github.com/eXon/videojs-youtube/issues/339#issuecomment-164592838
Related
After too many hours on YT and Google, I'm here. Thanks for taking the time to read & help. :)
I'm trying to make it so that when the mouse hovers over the image, an audio snippet plays automatically. I've tried a few different things, but this is where I stopped.
Can't seem to get anything to work.
HTML file snippet
<head>
<link rel="stylesheet" href="./stylesheet.css">
<script type="text/javascript" src="./scripts.js"></script>
...other stuff etc etc
<div class="deviruchi" data-tooltip="no touchy!">
<audio id="devi">
<source src="./sounds/deviruchi_idle.mp3">
<source src="./sounds/deviruchi_idle.ogg">
</audio>
<img src="./images/deviruchi.gif">
</div>
Javascript file
let deviruchi = $("#devi")[0];
$(".deviruchi").onmouseenter(function () {
deviruchi.play();
});
Thanks again! :)
Probably because you are using jquery...(j/k, but no really)
Make sure that the audio files are present on the server, check devtools for error messages (javascript as well as network)
Also, user must first interact with the webpage (click/focus, etc) before browser will allow play media files.
hoverMe.addEventListener("mouseenter", e =>
{
myAudio.play().catch(er => console.error(er.message, "Now, click here and try again"));
});
hoverMe.addEventListener("mouseleave", e =>
{
myAudio.pause();
});
<div id="hoverMe">Hover over here</div>
<audio id="myAudio" src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3"></audio>
I want to open an audio control in a new window and pass the filename to the audio control from an MVC5 View.
I am able to open a simple html page with the following code in the MVC5 view:
<a href="Music/Music.html"
onclick="window.open('Music/Music.html',
'newwindow',
'width=600,height=200');
return false;">html Link</a>
Then the Music.html page loads and plays the file using this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<audio controls>
<source src="001.mp3" type="audio/mp3"> audio playback requires IE9 or above
</audio>
</body>
</html>
That all works great, but I really want to pass the filename to the new page so the src is loaded with whatever filename I pass. I do not how to do this, or if there is a better more efficient way to do this using other features of MVC5.
Added after original post based on Joe Warner's proposed answer:
This code is placed in index.vbhtml for the Home controller:
#Code
Dim myUrl As String = "Music/Music.html?003.mp3"
End Code
<a href="#myUrl"
onclick="window.open('#myUrl','_blank','width=600,height=100');
return false;">
html link a
</a>
<a href="#myUrl" onclick="myOpenWindow">
html link b
</a>
#Section Scripts
<script type="text/javascript">
function myOpenWindow() {
window.open('#myUrl', '_blank', 'width=600,height=100').focus();
}
</script>
End Section
This is the target Music.html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<audio controls>
<source src="" id="audio" type="audio/mp3"> audio playback requires IE9 or above
</audio>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('audio').src = window.location.search.substr(1)
});
</script>
</body>
</html>
For both html link a and html link b the target Music.html page loads and plays the 003.mp3. But html link a opens a new window and html link b replaces the existing window.
I'm certain I'm making a basic mistake, but why can't I move the inline window.open javascript into a function so it can be called by other elements that might exist on the page?
html Link
attach a function to the on click then open the window with '_blank' this opens the document in a new window or tab.
function openWindow() {
window.open("/Music/Music.html?filenameyouwant", "_blank",
"width=600, height=200"
).focus();
}
Add an id to the source HTML
<source src="001.mp3" id="audio" type="audio/mp3">
Then select it using javascript and set the src of it to the end of the url you've gone to you'll want to wrap the getting of the url param till after the dom has loaded otherwise there will be no source element
?filenameyouwant
document.addEventListener("DOMContentLoaded", (event) => {
document.getElementById('audio').src = window.location.search.substr(1)
});
I am helping a friend make a website and am a novice with javascript so could do with a little help. I have researched on here and see that some similar questions have been asked before but would like to know exactly how to relate this back to my code. So far this code works well, when you load up the homepage, the video clip runs IF the window is wider than 600px, but the video clip doesn't run if the window is less than 600 pixels. Also the other javascript makes the video disappear once it's played. However the problem I have is if you go to another page on the site, and then back to the home page, the video plays again and again, but I want the video to play only once when the visitor arrives to the site. Could anyone advise how I would edit the code so that the video only runs once per visit? All relevant code is below:
<script type="text/javascript">
window.addEventListener('load', function() {
if (window.innerWidth >= 600) {
var vid = document.getElementById('video');
var wrap = document.getElementById('videowrapper');
wrap.classList.toggle('hide');
vid.play();
vid.addEventListener('ended',function(e) {
wrap.classList.toggle('hide');
});
}
})
</script>
<div id="videowrapper" class="hide">
<video id="video" controls>
<source src="clip.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div id="videoEnd" style="display:block">Chris Presents</div>
</div>
<script>
document.getElementById('video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
// What you want to do after the event
document.getElementById('video').style.display="none";
document.getElementById('videoEnd').style.display="none";
}
</script>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="oldhomestyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="soundmouseover.js"></script>
</head>
Not sure what is this code doing in your tag! (the divs)
Other than that, as mentioned, you could definitely use cookies for what you need.
You can set localStorage to store value representing if video has been played at ended event, read localStorage at load event of window
window.addEventListener('load', function() {
if (window.innerWidth >= 600 && localStorage.getItem("played") === null) {
var vid = document.getElementById('video');
var wrap = document.getElementById('videowrapper');
wrap.classList.toggle('hide');
vid.play();
vid.addEventListener('ended', function(e) {
wrap.classList.toggle('hide');
localStorage.setItem("played", true)
});
}
})
I am currently making a page for educational purposes. Now i am making a page which contains multiple buttons that contain the function that when u click them, that they will play music. now i need 10 of these under eachother. But I have 10 different sound fragments. If i put 10 different scripts underneath eachother, that will make an absolute mess and I was wondering if it was possible to have those scripts together in an other file. Or is there an easier way to do it? I have this idea that this can be a lot easier.
this is the script and html I use.
<script>
function playMusic (){
var audio = document.getElementById("geluidsopname");
audio.play();
}
</script>
<button id="voortgang-button" onclick="playMusic()" value="button">
<img id="afspeelbutton" src ="../../../image/afspeelbutton1.png"> </img>Ik heet Marie.
<audio id="geluidsopname" src="../../../voice-recording/Marie.mp3"></audio>
</button>
You don't necessarily need to assign every element a unique id, you can access them through different methods. Take a look at document.querySelector, for example.
Calling a JS function from within an HTML event attribute is fine, but not recommended. Registering an event directly on your JS code is much cleaner.
You may want to put a single script just before the body's closure, or eventually put it in the head and execute it on DOMContentLoaded.
<button class="myBtn" id="button1">
<img src="url">
<audio>
<source src="url" type="audio/mpeg">
Your browser does not support the audio feature.
</audio>
</button>
<script type="text/javascript">
for (var aud in document.querySelectorAll('.myBtn')) {
aud.addEventListener('click', function() {
aud.querySelector('audio').play();
}, false);
}
</script>
Of course, you could just add the controls attribute to the audio element and have all events related to audio controls handled by the browser:
<button class="myBtn">
<img src="url">
<audio controls>
<source src="url" type="audio/mpeg">
Your browser does not support the audio feature.
</audio>
</button>
Here is a plunker of the code. I've modified a bit the html structure for the demo. Still the idea is there: your script uses parameter.
// Code goes here
function playMusic ( target ){
console.log(target.getAttribute("target_audio"))
var audio = document.getElementById( target.getAttribute("target_audio") );
audio.play();
}
And html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<input type="button" id="voortgang-button" target_audio="geluidsopname" onclick="playMusic( this )" value="button">
<img id="afspeelbutton" src ="../../../image/afspeelbutton1.png">Ik heet Marie.
<audio id="geluidsopname" src="../../../voice-recording/Marie.mp3"></audio>
</body>
</html>
If you like, you can pass id as a string, to the handler method. Then you dont need to get attribute's value even.
hello i am abit new in client side programming and html,
i am trying to excute the following line in firefox and other browsers , the code should
play a sound, problem is that the code works and play the sound on IE and Chrome but not on firefox here is my code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script type="text/javascript">
function playsound()
{
var sound= document.getElementById("check");
sound.play();
}
</script>
</head>
<body>
<audio id = "check" preload = "auto">
<source src = "check.mp3" type = "audio/mpeg"></audio>
<input type="button" onclick="playsound()" value="play">
Firefox doesn't support the MP3 format as audio source. If you add a second source file in OGG format, the script should work in Firefox too. See this Link for more info
The fact is that firefox and opera do not support mp3 files in html5 audio tag. You can check supported browser in w3schools. Its work around is that you need a fallback flash audio player.