I am searching for the holy grail of a simple looping html5 video, I am currently using the following code which doesn't seem work
<video width="650" height="650" class="outer_shadow" autoplay="" ended="this.play()" loop>
<source src="/videos?video_id=ag1kZXZ-anQtd2luZG93cg4LEghUaW1lRGF0YRgNDA">
</video>
Can anyone could hilight why this code doesn't work/suggest their best work arround?
Surely you just need to set the loop attribute (see fiddle tested in Chrome):
<video id="myVideo" width="650" height="650" class="outer_shadow" autoplay loop>
<source src="http://content.bitsontherun.com/videos/nPripu9l-60830.mp4">
</video>
If firefox still doesn't like the loop attribute, try the following fix:
document.getElementById('myVideo').addEventListener('ended', function(){
this.currentTime = 0;
}, false);
Update:
Perhaps not as simple as you had hoped but, as a work around for the problem, it might be worth trying one of the many HTML5 video libraries such as video.js. If the problem persists you could, as a worst case, force the library to use Flash where supported (ie. desktop) and fall-back to HTML5 where it's not (as explained here).
Here is the fiddle with working example of HTML5 video player that loops several videos. Just add your URLs to src array...
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<video id="video" width="500" height="400" controls autoplay></video>
<script>
var src = [
"http://content.adfox.ru/131007/adfox/205544/865991_11.mp4",
"http://all.rutube.ru/130627/gpmdigital/217059/805529_11.mp4"
];
var curSrc = 0;
$(function() {
$('#video').attr("src", src[curSrc % src.length]);
curSrc++;
var video = $('#video').get(0);
$('#video')
.on('loadedmetadata', function() {
video.currentTime=0.01;
video.play();
})
.on('ended', function() {
console.log('ended');
video.src = src[curSrc % src.length];
video.load();
curSrc++;
});
});
</script>
Related
I am live streaming via videojs. The stream works but I am unable to get it to autoplay. Instead I need to click the play button each time I go on the page.
<video-js id="my_video" autoplay controls preload="auto" width="762" height="428" poster="images/poster2.jpg">
<source src="http://xx.xxx.xxx.xx:1935/live/xxxxx/playlist.m3u8" type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/#videojs/http-streaming/dist/videojs-http-streaming.js"></script>
<script>
var player = videojs('my_video');
video.autoplay = true
</script>
Many browsers won't allow autoplay now unless the video is muted. You can add the muted attribute.
You can also use the any option for autoplay, in which case the video will be autoplayed with sound if possible, if not then autoplayed muted if that is possible. Remove the autoplay attribute and use a setup option instead:
var player = videojs('my_video', {autoplay: 'any'});
var options, player;
options = {
controls: true,
autoplay:'any',
techOrder: [ 'chromecast', 'html5' ],
plugins: {
chromecast: {}
}
};
player = videojs(document.getElementById('vjs'), options, function() {
player.chromecast();
});
I do found something online that is just about to be similar to what am trying to achieve, but here are a few problems i encountered. (1) i want the time be in minutes and seconds format. (2) the code only works for a single video in my html file. how can i make the code work for multiple videos in my file all showing their different durations. below is the code
<script> var myVideoPlayer = document.getElementById('video_player'), meta = document.getElementById('meta'); myVideoPlayer.addEventListener('loadedmetadata', function () { var duration = myVideoPlayer.duration; meta.innerHTML = "Duration is " + duration.toFixed(2) + " seconds." }); </script>
<video id="video_player" width="320" height="240" controls poster="something/something.jpg"> <source src="someVideo.mp4" type="video/mp4"> </video>
<div id="meta"></div>
This is what I want to achieve using codeigniter
Like this:
<video width="320" height="240" id = "myVideo" controls>
<source src="someVideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
var e = document.getElementById("myVideo");
var cancelAlert = false;
var run = function() {
if (e.readyState === 4 && !cancelAlert) {//readyState 4 means it is loaded fully
cancelAlert = true;//This is so that it only alerts once. No spam pls.
alert(e.duration);
}
requestAnimationFrame(run);//This is so that it runs every frame.
};
run();//run the function
</script>
You may need to do some tweaking, and there is probably a more efficient way to do this, but this is what I do.
I have been searching for a long time and have tried a lot of approaches but nothing seems to be working. I have a video tag which I want to be played when I tap over it. I am working on Ionic 3 and angular. The code is shown below. Please help me out or direct me if I missed anything.
HTML:
<video id="edit-video-element"
width="100%"
[src]="videoPath"
webkit-playsinline
poster="{{thumbnailPath}}" controls autobuffer >
</video>
.ts file
this.video = document.getElementsByTagName('video')[0];
onVideoClick(e) {
(this.video.paused) ? this.video.play() : this.video.pause();
}
Its not displaying any issues, but not working at all.
Update:
<video *ngIf="hasVideo" width="100%" controls autoplay>
<source [src]="videoPath" type="video/mp4">
</video>
I added this and then in the .ts file I have the videoPath as:
file:///private/var/mobile/Containers/Data/Application/99091302-995E-40C7-AF66-0E07BCF09220/tmp/trim.E4AE7B29-06BB-4077-A56A-B546A53267DC.MOV
Update:
I was able to make it work for the files from photo album
I had to install "DomSanitizer" and then add _DomSanitizationService.bypassSecurityTrustUrl(yourFilePath) in my video tag.
Try this out. It's working fine for me.
Html
<video #videoPlayer class="video-player" controls></video>
TS
#ViewChild('videoPlayer') mVideoPlayer: any;
ionViewDidLoad() {
let video = this.mVideoPlayer.nativeElement;
video.src = 'http://techslides.com/demos/sample-videos/small.mp4';
video.play();
}
sass
.video-player {
width: 100%;
height: 100%;
}
I have a .mp4 video in my html page. I applied autoplay to that video, it stops at ending frame. My concern here is this video should come back at first frame once the video playing done. Can anybody please suggest what should i do to do this. Thanks
If you just want the video to loop and start again you can use the 'loop' attribute:
<video controls loop>
<source src="yourVideo.mp4" type="video/mp4">
...
</video>
If you want to detect the end of the video and do something else, like restart the video you can use the end of video event in JavaScript:
$("#yourVideo").on("ended", function() {
//Add whatever you want to do when the video ends here
video.pause();
video.currentTime = 0;
video.play(); //You may not need this - experiment on different browsers
video.pause();
});
Must include js file I am using CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
document.getElementById('Sample').addEventListener('ended',myHandler,false);
function myHandler(e) {
var video =document.getElementById('Sample');
video.currentTime = 0;
video.pause();
}
});
</script>
HTML
<video src="video.mp4" id="Sample" autoplay>
video not supported
</video>
By javascript and assuming that you know the framerate of your video:
function goFirstFrame () {
var video = document.getElementById('videoId');
var frameTime = 1/25; // If your video is 25fps
video.currentTime = 0 + frameTime;
video.pause();
}
How do I play two videos in a sequence in the HTML5 video tag?
In Google Chrome, the following code plays only the first intro video.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
var i = 0;
var sources = ['1.mp4', '2.mp4'];
videoElement.addEventListener('ended', function(){
videoElement.src = sources[(++i)%sources.length];
videoElement.load();
videoElement.play();
}, true);
</script>
</head>
<body>
<video id="videoElement" width="640" height="360" autoplay="autoplay">
<source src="intro.mp4" type="video/mp4"></source>
</video>
<body>
<html>
Browser should fire error 'videoElement is not defined' with your JavaScript code, you must get video element from DOM instead of using its id directly. Please change your code to
$(document).ready(function() {
//place code inside jQuery ready event handler
//to ensure videoElement is available
var i = 0;
var sources = ['1.mp4', '2.mp4'];
$('#videoElement').bind('ended', function() {
//'this' is the DOM video element
this.src = sources[i++ % sources.length];
this.load();
this.play();
});
});
In case someone came across this question again, here is my solution to similar problem-I needed to play first video once and then second video in a loop. I also have support for .webm, .m4v and .mp4.
This is my JS:
$(document).ready(function(){
var vid = document.getElementById("landing-video");
vid.onplay = function() {
var source=vid.currentSrc;
folder = source.match(/(.+)(\/)/);
ext = source.match(/(\.\w+)$/);
};
vid.onended = function() {
$("#landing-video").attr({
"src":folder[0]+"video-2"+ext[0],
"loop":""
});
};
});
And this is my HTML:
<video autoplay="" muted="" poster="" id="landing-video">
<source src="my-folder/video-1.webm" type="video/webm">
<source src="my-folder/video-1.m4v" type="video/x-m4v">
<source src="my-folder/video-1.mp4" type="video/mp4">
</video>
This might save someone some time.