HTML5 video stutters on loop? - javascript

I have an HTML5 video element on my page, it's scaled to fill the entire background with the idea being that it will loop as it plays. This works fine in Chrome but Safari and Firefox have stutter on loop. It's a good half a second in Firefox. Any ideas?
Here's my markup for the video player:
<video id="vid" preload="auto" autoplay loop onended="this.play();">
<source src="vid.mp4" type="video/mp4"/>
<source src="vid.webm" type="video/webm"/>
</video>
I've tried a number of things, like controlling the playback entirely with JS instead of relying on the browser to figure it out. But there's always the stutter. I don't think it's an issue with preloading because if I do it all locally the video loads instantly (obviously) but there's still the same loop. Is this just an issue inherent in these browsers?
I'm tempted to create two instances of the video and simply toggle them with JS after each finishes. It'd be really dirty but I'm not sure what my other options are.

I solved it by removing the audio track of the .mp4 during encoding. Not Ideal if you need the audio but it worked well in my case.

I had this issue and I actually fixed it by putting the webm source before the mp4 source. That way it tried to load the webm video format first, and it had less stutters when I was testing it. mp4 and ogv files both had stutters in Firefox and it drove me nuts, so I was amazed when webm files seemed to work as intended.
<video id="vid" preload="auto" autoplay loop>
<source src="vid.webm" type="video/webm"/>
<source src="vid.mp4" type="video/mp4"/>
</video>

Related

Problem to play audio instantly for large size audio file

I am trying to add audio in my code
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
and above code is working fine.. but i am facing problem if audio is quite big. i have to wait for couples of second to listen the audio,
is there is any alternative for the same so we can play audio instantly without any wait?
I found one solution , see if it works :
You can use the following property of audio element to solve your problem!!
Preload hinting:
You can optionally use the preload attribute to give the browser a hint as to whether, and how, it should preload the audio file when the page loads. Preloading the audio file means it can play instantly when the user hits the “play” button, which is a nicer experience for the user.
<audio preload="auto">
<source src="WhiteChristmas.mp3">
<source src="WhiteChristmas.ogg">
</audio>
Refer this site:
https://www.elated.com/html5-audio/
you could try to check the spelling...i to had this problem but when i checked and corrected the spelling of the file,it loaded instantly.The code is:
<audio controls
Your browser does not support the audio element.

html 5 video tag preload attribute not working in firefox

<video class="student-video" controls preload="none">
<source src="video.mp4" type="video/mp4">
</video>
somehow this works perfectly in chrome but doesn't work in firefox.
Is there anyway for firefox to prevent autoplay?
I have heard about this problem, you can try this:
Go to Preferences > Advanced > General
In Browsing section, unmark the "Use hardware acceleration when available:
Save it.
Now restart Firefox and check your video.
It may help you, in some cases this is also issue.
You can also try this:
How to play MP4 video in firefox
Try to remove the "proload" option from the code and test

HTML5 video tag in IE plays 2 tracks simultaneously instead of one

I have this page
http://joewillhelpyou.com
Users click the blue botton and a video page begins to play.
I have it simple. an iframe so the Jquery dows not mess with my tag that I found would not allow me to autoplay the next video, and 2 src for each video. In all the browswers they work okay, only one video is played back mp4 or webm. but in IE I keep hearing two playing back and I cannot figure out why
you can visit the page and tell me if you catch my mistake or a workaround for IE
<div id="videodiv">
<iframe src="http://joewillhelpyou.com/videos/step2/play02_01.html" width="1000" height="750"></iframe>
</div>
then this leads to a page where I have the video
<video controls autoplay width="936" height="624">
<source src="002_001.mp4" type="video/mp4">
<source src="002_001.webm" type="video/webm">
Your browser does not support the video tag.
</video>
under normal situations the code only plays one choce right? but in IE it seems to play 2 things at once, the rest of the browsers only sound out one track and that is what I want

flowplayer: chrome won't load mp4 if webm specified first

flowplayer html5 5.4.6
chome 35+
in flowplayer html5, on chrome i kept getting html5: video encoding not supported or html5: video not found.
I load flowplayer via javascript and have a playlist defined like so:
$(function () {
$('#fp').flowplayer({
playlist:[ [
{ webm: "/usermedia/update_sets/140704/videos/02-480p.webm"},
{ mp4: "/usermedia/update_sets/140704/videos/02-480p.mp4"} ] ],
splash: true
});
});
i checked the video format of the mp4 and all was well. I can even drag and drop the mp4 into chrome and it plays np.
in chrome dev tools i opened the network tab and can see that it tries to open the webm file, get partial content, then cancels the get get.
it never tries to load the mp4 file.
So i tried reversing the order so that mp4 was the first in the playlist.
voila. video plays no problem.
I also tested in firefox and it works without issue.
The question is, why does flowplayer html5 on chrome fail if webm source is specified first in the playlist?
='(
take a look here
i hope this helps you
the browser checks what works but it looks from top to bottom so if the first works for him he wil use it so change the order and it suppose to work
to give an example to you
<div class="flowplayer">
<video>
<source type="video/webm" src="http://example.com/intro.webm">
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
now webm will go first,
if you change it to:
<div class="flowplayer">
<video>
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/webm" src="http://example/intro.webm">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
.mp4 go first.

Audio Track Duration Showing "Infinity:NanNan" in Safari Only

I've got an audio file being played with the basic HTML5 audio tag:
<audio controls itemprop="audio">
<source src="http://mysite/mus/my_music_file.mp3" />
</audio>
I'm using Audio.js along with the audio tag for serving up a fallback flash version, as well as a nicely designed player.
In Chrome and Firefox, everything is working as it should, and it's showing the length of the track. Safari is showing: Infinity:NanNan in the spot where the song's length should be shown.
I did a search and found a few similar questions, but both seem to be talking about PHP headers? I'm not using PHP with my audio files, but it is within a Wordpress theme. Could that be an issue?
you should indicate the codecs, and not preload
<audio preload="none" controls>
<source src="/path/to/the/source" type="audio/mp3" codecs="mp3"/>
</audio>

Categories