I am playing videos one after another in following code,
<html>
<body>
<video src="videos/video1.mp4" id="myVideo" autoplay>
video not supported
</video>
</body>
<script type='text/javascript'>
var count=1;
var player=document.getElementById('myVideo');
player.addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e)
{ e = window.event; }
count++;
player.src="videos/video"+count+".mp4";
}
</script>
Now, my question is, There are many video files having different name (in remote directory) which is on server and
I don't know name of all files. So how to make their queue and play one after another using JavaScript??
This work for me :)
<video width="256" height="192" id="myVideo" controls autoplay>
<source src="video/video1.mp4" id="mp4Source" type="video/mp4">
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
var count=1;
var player=document.getElementById('myVideo');
var mp4Vid = document.getElementById('mp4Source');
player.addEventListener('ended',myHandler,false);
function myHandler(e)
{
if(!e)
{
e = window.event;
}
count++;
$(mp4Vid).attr('src', "video/video"+count+".mp4");
player.load();
player.play();
}
</script>
Your variables are inconsistent:
change
videoplayer.src=nextvid;
to
videoPlayer.src = nextvid;
also, according to the solution that you linked, it appears that the user fixed it by binding it via javascript instead of using the onended attribute. Have you tried that?
videoPlayer.onended(function(e) {
run();
};
Not sure but i did something similar with pictures. Try using an if statement to determine if the video is done playing or a button is pressed and then change the src of the video to the next one in an array ex:
$("#my_videos").attr("src",videos[turn]);
Try to get the list of video files as a response from the server.
Store the response in an Array say "playlist".
Then change the video src as player.src=playlist[count]. Here "count" is the same counter you are using now.
Related
I'm trying to play an audio when page is loaded, it should be really simple however i can't accomplish it.
The problem is that it is not playing, i tried checking the state of autoplay (True/False) and it says it does playing when page is loaded although it does not, also tried making a function which will change the auto play state to True but it didnt do anything ...
<html>
<head >
<audio controls autoplay id='myAudio'>
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</head>
<body onload="tryy()">
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
function tryy()
{
var audio = document.getElementById("myAudio");
audio.autoplay = true;
audio.load();
}
</script>
</body>
Also looked up for similar question here and tried thier solution as well but none of them worked.
I'm trying to play an audio when page is loaded, it should be really simple...
Yeah, well, it isn't. Autoplay with sound is largely disabled in all mainstream browsers these days.
See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
This question already has answers here:
HTML5 Video / End of a Video Poster
(10 answers)
Closed 6 years ago.
I was using Video.JS but ultimately had to scrap it and go with plain HTML video embed tag. Can someone help me with the JavaScript that will return the to start poster when the video stops playing. I had it working in Video.JS but can't find the right code for standard HTML.
Here's the current code and I cleared out the JavaScript since it wasn't working anyway.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="testimonials" width="448" height="336" controls preload="auto" poster="https://dl.dropboxusercontent.com/u/236154657/video-splash-image4.png"
data-setup='{"example_option":true}'>
<source src="https://dl.dropboxusercontent.com/u/236154657/WK%20Life%20Coaching%20Video%2012.13.mp4" type='video/mp4'>
</video>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
</body>
</html>
The easiest way I have been able to find is to reset the source of the video on the ended event so that it returns to the beginning. The other way to handle it would be to have a div with the poster image in that you swap out for the video, but this is simpler...
<script>
var vid=document.getElementById('testimonials');
vid.addEventListener("ended", resetVideo, false);
function resetVideo() {
// resets the video element by resetting the source
this.src = this.src
}
</script>
A f'up to my above comment: The onended event fires only after the video player has expended its content, and gone to black. So between the end of video and the poster, we see a black flicker.
To prevent the flicker, I simply ran the video to near its end, then called .load() to park the player back onto the poster:
<video ontimeupdate="video_time_update(this)"
poster="/ourMovie.png">
<source src="/ourMovie.mp4" type="video/mp4">
</video>
...
function video_time_update(video) {
if (video.currentTime > 3.3) {
video.load(); /* parks the video back to its poster */
}
}
Note that we know our video is 3.4 seconds long, AND we don't mind missing the last few frames. video_time_update() is lazy, and does not call for every tick.
And note that those of you serving videos of unknown duration might need this.duration instead of 3.3, there.
Please go through the link below with realated infor:
Redirect html5 video after play
<script src="text/javascript">
// Do not name the function "play()"
function playVideo(){
var video = document.getElementById('video');
video.play();
video.addEventListener('ended',function(){
window.location = 'http://www.google.com';
});
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
Hope this helps.
Below its working 100%
<script type="text/javascript">
function skip(value) {
var video = document.getElementById("Video1");
video.addEventListener("ended", resetVideo, false);
video.currentTime = 0;
video.currentTime += value;
video.play();
function resetVideo() {
video.load();
}
}
</script>
The below code is how I put audio in my webpage. It will play the sound when I received protocol from my slave device.
<script>
function RxProtocol()
{
var a = document.getElementById("audio1");
a.play();
}
</script>
<body>
<audio id="audio1">
<source src="audio.wav" type="audio/wav">
<source src="audio.mp3" type="audio/mpeg">
audio tag not supported.
</audio>
</body>
It is suppose to play the sound each time it received a protocol. But when I use google Chrome, it just play once only (after refresh/reloading the page) when it received the first protocol. After that it is silence when receive protocols.
Other browser like IE9 or firefox do not have this problem. Do you guys know why?
Try adding addEventListener :
<script>
function RxProtocol()
{
var a = document.getElementById("audio1");
a.play();
}
document.addEventListener("load", RxProtocol, false);
</script>
Regards, Daniel
We need to load first for Google Chrome:
function RxProtocol()
{
var a = document.getElementById("audio1");
if (window.chrome) {
a.load();
}
a.play();
}
I have a problem with creating a video player in my webpage. I have a list of video title and one video player using object tage.
My purpose: when i click on video title, it will load the video and play according to video's file.
Can anyone help me to solve this problem?
Try the demo
Test video<br>
Pentagon<br>
Cat Giraffe<br>
<video id="player" src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>
<script type="text/javascript">
$(function(e) {
$('a').click(function(e) {
e.preventDefault();
var video_file = $(this).attr('href');
$('#player').attr('src', video_file)[0].play();
});
});
</script>
I am looking for a way to show or hide HTML5 video controls at will via javascript. The controls are currently only visible when the video starts to play
Is there a way to do this with the native video controls?
I'm using google chrome browser.
<video id="myvideo">
<source src="path/to/movie.mp4" />
</video>
<p onclick="toggleControls();">Toggle</p>
<script>
var video = document.getElementById("myvideo");
function toggleControls() {
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
</script>
See it working on jsFiddle: http://jsfiddle.net/dgLds/
Here's how to do it:
var myVideo = document.getElementById("my-video")
myVideo.controls = false;
Working example:
https://jsfiddle.net/otnfccgu/2/
See all available properties, methods and events here: https://www.w3schools.com/TAGs/ref_av_dom.asp
CARL LANGE also showed how to get hidden, autoplaying audio in html5 on a iOS device. Works for me.
In HTML,
<div id="hideme">
<audio id="audioTag" controls>
<source src="/path/to/audio.mp3">
</audio>
</div>
with JS
<script type="text/javascript">
window.onload = function() {
var audioEl = document.getElementById("audioTag");
audioEl.load();
audioEl.play();
};
</script>
In CSS,
#hideme {display: none;}