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>
Related
I have a WordPress site with a page containing a video; I'd like this video to play automatically when the page is visited, and once the video has finished playing, I'd like a redirect to happen to a different page on my site.
I've followed the instruction from this post:
Redirect html5 video after play
But this doesn't seem to work for me and I can't figure out what I should do differently.
Here's the code currently on my page:
<script src="text/javascript">
function playVideo(){
var video = document.getElementById('addiction-video');
video.play();
video.addEventListener('ended',function(){
location.href = 'http://mywordpresssite.com/addiction-a-call-for-connection-acim/';
});
}
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>
Can anyone tell why it's not redirecting after the video has finished playing?
I have the above code directly in my WordPress page; I've tried placing the script below the html, and I've tried adding the script into my theme settings, but neither made it work.
Thank you!
Firstly change <script src="text/javascript"> to <script type="text/javascript"> since you are not importing an external script file. Read a bit about <script> tag.
Secondly you don't need the playVideo() function. Rewrite your code accordingly:
<script type="text/javascript">
var video = document.getElementById('addiction-video');
video.addEventListener('ended',function(){
location.href = 'http://mywordpresssite.com/addiction-a-call-for-connection-acim/';
});
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>
You don't need video.play();, since you have autoplay="autoplay" attribute in <video> tag. Read about it here and try it yourself here.
Thirdly keep your browser console open while writing a js code.
Good Luck!
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>
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.
I'm trying to play and go fullscreen for an HTML5 video element on an iPad/iPhone via JavaScript, but when I try videoElement.webkitEnterFullScreen(), I see an INVALID_STATE_ERR: Dom Exception 11.
My Code
For Example
Now, it looks like specific support for this behavior was added here:
which specifically prevents going fullscreen without a user gesture.
My question:
Is there a workaround for this?
I see that Vimeo's HTML5 video player is mimicking this behavior somehow as seen here
(on iPad/iPhone)
So, it seems it is possible. Am I missing something?
Testing on iOS simulator Ipad
Hope I can help someone:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var vid;
function init() {
vid = document.getElementById("myVideo");
vid.addEventListener("loadedmetadata", goFullscreen, false);
}
function goFullscreen() {
vid.webkitEnterFullscreen();
}
$(document).ready(function(){
init();
$("#myVideo").bind('ended', function(){
$('#myVideo')[0].webkitExitFullScreen();
});
});
</script>
</head>
<body>
<h1>Fullscreen Video</h1>
<video src="movie.mp4" id="myVideo" autoplay controls >
</video>
</body>
</html>
I used this and it worked for me
- (void) makeHTML5VideoFullscreen {
if(webView) {
[webView stringByEvaluatingJavaScriptFromString: #"document.querySelector('video').webkitEnterFullscreen();"];
}
}
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;}