I have only very recently got into coding. In fact, yesterday. Right now I am trying to code a web app that, when pressed, displays a few buttons that when clicked play songs. However when I try to click on the buttons, it just does nothing. I believe it has something to do with chrome not allowing in-line java script, but I'm not 100% sure.
Here is my code
HTML:
<!DOCTYPE html>
<html>
<head>
<script>
var song = new Audio();
song.src = "SoundsOfSilence.mp3";
var song2 = new Audio();
song2.src = "ChildrenPlaying.mp3";
</script>
</head>
<body>
<nav>
Sounds Of Silence
Children Playing
</nav>
</body>
</html>
try using the audio attribute tags.
Such as:
<audio controls autoplay>
<source src="SoundofSilence.ogg" type="audio/mpeg">
<source src="ChildrenPlaying.mp3" type="audio/mpeg">
</audio>
Related
I'm working on a website and the client really insists on having a video with sound that plays once the video is clicked.
The problem is that the video needs to disappear immediately after it's played.
Is this even possible?
I was trying some jQuery and JS but no success.
Any help or hint would be greatly appreciated.
Thank you
Yes, you can hide the video after playing. Here's what I would do.
Get the video object
Add a listener to the video to listen to when it finishes (ended)
Set the display style to none
Here's my code:
Javascript:
function setupVideo () {
// get video
var video = document.getElementById('myVideo')
// Play the video, this is optional
video.play();
// Add a listener to this video, so that when the video ends, the video is "hidden".
video.addEventListener('ended', function() {
// hide video
video.style.display = "none";
})
}
HTML:
<html>
<head>
<script src="your_js_file.js" type="text/javascript" />
<!-- Other content -->
</head>
<body onload="setupVideo()">
<video controls src="your_video.mp4" id="myVideo">
Video not supported
</video>
</body>
<!-- Other content -->
</html>
Demo: https://jsfiddle.net/thunderredstar/7w3hrqbo/1/
(Please make sure to run the fiddle)
I want to run the RTSP live video stream on my web page.The following code works good with the rtsp//url as shown in the code but when I replace that URL with my cam IP ,its not working.The cam IP link is playing in VLC player but not in my HTML PAGE.
How can I display an RTSP video stream in a web page?
is some what related to what i'm trying to ask but it doen't help me to find solution.
Is there any solution for this.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Streamedian player example</title>
<style>
#test_video {
width: 720px;
}
</style>
</head>
<body>
<video id="test_video" controls autoplay>
<source src="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov"
type="application/x-rtsp">
<!-- <source src="rtsp://admin:abc#myIPAddress/"
type="application/x-rtsp">-->
</video>
<script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-beta.2/polyfill.min.js"></script>
<script src="streamedian.min.js"></script>
<script>
var p = Streamedian.player('test_video', {socket: "wss://specforge.com/ws/"})
</script>
</body>
</html>
I have the following HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<video id="video1" preload="metadata" width="1024" height="576" loop="false">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<script>
var video = document.getElementById('video1');
video.addEventListener("ended", function() {
alert('Ended');
});
video.play();
</script>
</body>
</html>
In chrome and firefox the video loops endlessly. Attaching listeners to the pause or ended events show these never actually get fired.
I need to know when a video has ended (and I need it to stop on ending). What am I doing wrong?
Apparently loop='false' still causes it to loop, and you have to completely remove the loop attribute to prevent looping. Ended never gets called if the video is set to loop.
video.addEventListener("ended",function(){
console.log("the video is end");
},false);
maybe you can use ontimeupdate and currentTime
i used audio tag among li tag to play different files . i cannot see the audio scroll bar for none of them . why is it so ? please help me out . here is the sample code i tried to run
<ul>
<li>Enduko Emo<audio id="18000">
<source src="./musicfiles/01._Enduko_Emo.mp3">
</audio>
</li>
<li>Ela Ela<audio id="18001">
<source src="./musicfiles/02. Ela Ela.mp3">
</audio>
</li>
</ul>
What browser are you testing this on? They don't all support MP3.
It seems there is no element in your source code. Please put below element to your source code. And try it again.
<head>
<script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js" data-framework-theme="tizen-white"></script>
</head>
I'm trying to react to the HTML 5 onended event for the video tag without success. In the code snippet below I added the mouseleave event to be sure the jQuery code is correct and that event does activate the alert() box.
The video plays just fine but I am not receiving the onended event (my alert() does not fire).
Testing in Chrome, updated today to version 5.0.375.55.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("#myVideoTag").bind('mouseleave onended', function(){
alert("All done, function!");
});
});
</script>
</head>
<body>
<video id="myVideoTag" width="640" height="360" poster="Fractal-zoom-1-04-Snowflake.jpg" controls>
<source src="Fractal-zoom-1-04-Snowflake.mp4" type="video/mp4"></source>
<source src="Fractal-zoom-1-04-Snowflake.ogg" type="video/ogg"></source>
</video>
<body>
<html>
Make sure you're binding to the ended event instead of onended, always leave the on out when binding with jQuery, for example you couldn't do .on("onclick"), you'd do .on("click").
If it helps, there's a full listing of available events for the <video> element here: http://www.w3.org/2010/05/video/mediaevents.html
I was searching for the answer for this too. Here's what worked for me in for the jQuery mobile framework:
$(document).ready(function(){
$("#idname").bind('ended', function(){
$.mobile.changePage($('#idofpageyouwantogoto'), 'fade');
});
});