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');
});
});
Related
I've a simple html page which displays an RTMP stream from nginx server and it works without any issue. Here is the working html code:
<div id="middlebox">
<h2>RTMP Stream</h2>
<video
id="uav1-video"
class="video-js"
controls
preload="auto"
width="640"
height="480"
data-setup="{}">
<source src="/hls/stream1.m3u8" type="application/vnd.apple.mpegurl" />
</video>
</div>
Now I want to integrate this functionality into Vue3 application. I added the following in <template> and <script> tag of a view component:
<template>
<div id="app" class="container">
<div>
<h2>RTMP Stream</h2>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="320"
height="180"
data-setup="{}">
<source src="/hls/stream1.m3u8" type="application/vnd.apple.mpegurl" />
</video>
</div>
</div>
</template>
<script>
export default {
name : 'View',
data() {
return{
}
},
mounted() {
let videoScript = document.createElement('script')
videoScript.setAttribute('src', './js/video.js')
document.head.appendChild(videoScript)
},
}
</script>
With the above code only video player appears on the html page but I'm unable to play the stream. I don't see the big play button which I see in the html page.
When I check the html page in the browser, I see the following exception:
Uncaught SyntaxError: Unexpected token '<' js/video.js:1
I'm not sure how to resolve this issue. Can anyone please help. Thanks
Videojs has a pretty specific way of being setup. I haven’t been able to adapt it to fully customize in Vue3 yet. But, if you look at the videojs website and navigate to the Vue instructions follow them exactly as it says and setup a component then load that component into your page it will work.
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 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>
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 have a simple html file which is meant to display embedded flash where I can write straight from the start, withouth clicking on it earlier.
To my dissapointment, I can't do it in my favorite browser! Problem happen to occur only on Opera. On FF and Chrome works fine.
Here's the code:
(...)
<script type="text/javascript">
function setFocus()
{
<!-- document.getElementById("clock-countdown").tabIndex = -1; -->
document.getElementById("clock-countdown").focus();
}
</script>
</head>
<body onLoad="setFocus();">
<object name="clock-countdown" tabIndex="0" >
<embed id="clock-countdown" wmode="opaque" src="clock-countdown.swf"> </embed>
</object>
</body>
It might help to have an external script insert the object/embed into the DOM, to avoid the click-to-activate state. (Sorry about that.. :-/)