I was wondering if any event can be called after an HTML video have been played.
$("video").bind("ended", function() {
this.load();
$('video').prop("autoplay", false);
});
you can add- video.addEventListener('ended',function() {});
Related
I have an HTML video in my web app:
<video src="" id="video-container" controls></video>
Initially the source is empty and I change it dynamically with JS, after loading some data:
var video = document.getElementById('video-container');
...
video.src = VIDEO_URL;
video.play();
That used to work perfectly and it was compatible with Vue.js 1 but, since I migrated to Vue.js 2 the video is no longer working. Calls to video.play(), video.pause() have no effect on the video player and attributes such as video.clientWidth returns zero values.
Is there any incompatibility with this element in Vue.js 2? Am I missing something?
Thanks!
Edit: Please check out Chrome's Documentation on force playing a video before implementing this.
Now that I know more about VueJS, this solution seems much better:
jsfiddle working
HTML
<div id="app">
<video ref="videoRef" src="" id="video-container" width="100%" controls></video>
</div>
JS
new Vue({
el: "#app",
mounted: function() {
this.$refs.videoRef.src = "http://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4";
this.$refs.videoRef.play();
}
});
While I was creating the fiddle as saurabh suggested I found the 'solution' (even if I can not provide an accurate explanation).
The problem arises when we are using VueJS 2 and we define the video element var before instantiating the Vue class. Strangely, the same code is working with VueJS 1:
Video not working. Vue 2.1.3
Video working. Vue 1.0.28
var video = document.getElementById('video-container');
new Vue({
el: "#app",
});
video.src = "http://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4";
video.play();
If the var is defined after Vue instantiation, everything works with version 2.
jsfiddle.net/6qmjw5xd/1/
new Vue({
el: "#app",
});
var video = document.getElementById('video-container');
video.src = "http://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4";
video.play();
I am using MediaElement.js and need other players to stop playing if another is starts.
This question has been asked before but I am a little confused as to how to apply this code.
I have seen others had solved this and had it working by using the following in jQuery:
$('video,audio').each(function() {
$(this)[0].pause();
});
Where should I put this code? Or where exactly in the jquery.js file should I put it? I can't get it to work.
I need my other players to stop playing if another starts.
/*new MediaElementPlayer('.player_1', {success: function(media, node, player) {
// this will be undefined since it's the player with buttons
alert(player.paused);
// this will be a real value since it's the underlying mediaelement
alert(media.paused);
}
});*/
$(document).ready(function() {
$('audio').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','volume','progress'],
audioVolume: 'horizontal'
//audioWidth: 400,
//audioHeight: 120
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://mediaelementjs.com/js/mejs-2.8.2/mediaelement-and-player.min.js"></script>
<link href="http://mediaelementjs.com/js/mejs-2.8.2/mediaelementplayer.min.css" rel="stylesheet"/>
<audio src="http://mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3" class="player_1"></audio>
<audio src="http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" class="player_2"></audio>
First off, I am quite a noob.
Ok, so I have embedded a SoundCloud track into my webpage. My question is, how do you refresh a page (or do anything else) when the track ends?
Can you do it with getDuration(I found that on SoundCloud API page)?
I tried to code it. In the code I tried to get the duration of the track and then print it on the screen/webpage. What is wrong with this code?
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<span id="headerLeft-content">
<script type="text/javascript">
var duration = 0;
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function() {
widget.getDuration(function(val) {
duration = val;
});
});
}());
document.write(duration);
</script>
</span>
If that worked, I would just put something like wait(duration) and then refresh...
In other words, can soundcloud embedded track be "hacked" to loop(or to refresh page after track is over, that's what I want to do) even though the original widget doesn't support looping?
Please, take a look at the SoundCloud html5 widget page where I found getDuration command and see if you can help me... => http://developers.soundcloud.com/docs/api/html5-widget#getters
EDIT:
<script>
var html=<iframe blablabla...></iframe>
document.write(html);
</script>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe),
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
}());
</script>
Page doesn't refresh after the track is over. Can you see what's wrong?
You can bind a function to the SC.Widget.FINISH event documented here. The following code snippet should work:
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
Of course if all you want is for the widget to loop, you could use the seekTo and play methods:
widget.bind(SC.Widget.FINISH, function() {
// again, again!
widget.seekTo(0);
widget.play();
});
That would be less intrusive than a page refresh.
widget.bind(SC.Widget.Event.FINISH, function() {
widget.seekTo(0);
widget.play();
});
In the other reply, the first parameter is missing ".Event".
Finally. A truly working version.
var widgetIframe = document.getElementById("soundcloud"),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.FINISH, function() {
widget.play();
});
I have a video shown in flowplayer from an external provider and I only have this few lines to embed the vidoe to ma page:
<script src="http://domain.com/live/js/jquery.min.js"></script>
<script src="http://domain.com/live/js/flowplayer.min.js"></script>
<script src="http://domain.com/live/js/flowplayer.playlist.min.js"></script>
<script src="http://domain.com/live/js/mi/vod.de.php?id=10857"></script>
The player starts right when the page is loaded.
This is the div for the player:
<div id="panes">
<a id="player" style="display:block;width:624px;height:344px;"></a>
</div>
How can I stop, pause and play the video manually?
How can I find out how I can "talk" to the player in order to stop/play the video?
I tried:
$f('player', '??', {
But how do I know the path to the swf file?
Please help!
Thanks in advance!!!
You have to use last version of the Flowplayer.
Use this format to start Flowplayer
( Some discussion u can find here https://github.com/flowplayer/flowplayer/issues/19 )
$(document).ready(function () {
try {
flowplayer().load([{ mp4: "http://stream.flowplayer.org/bauhaus/624x260.mp4" }]);
} catch (e) {
alert(e.message);
}
});
I'm trying to manipulate an audio file (mp3), using <audio> and javascript but nothing happens when I click the link. The alert() is working but nothing happens with the audio i.e. no pause, no play, nothing..., whether in Safari or Firefox. Is the coding dodgy or what?
Check this out:
jQuery/javascript:
$(document).ready( function(){
var audioElement = document.getElementById('audio_player');
$('div.audioControls .play').live('click', function(){
//alert('play');
audioElement.play();
});
$('div.audioControls .pause').live('click', function(){
//alert('pause');
audioElement.pause();
});
$('div.audioControls .playatTime').live('click', function(){
alert('play at time: 30 sec');
audioElement.currentTime = 30;
audioElement.play();
return false;
});
});
HTML:
<audio id="audio_player" controls="controls" src="aaliyah.mp3">
Your browser does not support the audio element.
</audio>
<div class="audioControls">
play
pause
play at 35 secondes
</div>
Thanks!
I now know why, it didn't work. To make use of the javascript API, the controls attributes needs to be removed from the html tag itself and it should work.
Thanks