Looping html5 video in Chrome? - google-chrome

According to this demo, it SHOULD be possible to loop video in Chrome
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_loop
but I can't seem to get it working when I simply apply
loop="loop"
to my video tag.
Does anyone have a solution?

I've seen that this post is rather old or might be resolved. In case you are just wondering let me point to a different threat.
I think the reason why you can't loop the video in Chrome is that for chrome the video only loops when served up by a server that understands partial content requests.
More on that here: HTML5 video will not loop
I thought that might help.

In html5 the 'loop' attribute is a Boolean so you should write:
loop='true'

Related

Is it possible to manipulate the audio from an RTCTrackEvent using the Web Audio API in Chrome?

I can successfully add a gain node to an audio element sourced from a file, but when I try it with a stream / audio element derived from an RTCTrackEvent's audio stream it ignores the gain node. I was curious if this was possible at all.
Yes it is possible, Checkout this sample - https://webrtc.github.io/samples/src/content/peerconnection/webaudio-input/
Source code - https://github.com/webrtc/samples/tree/gh-pages/src/content/peerconnection/webaudio-input
There is a known bug in Chrome that causes the stream not to work unless you do a hack and include a muted audio element. See the answer by jmcker here for the method and a jsfiddle example. This solved my issues.

HLS / Media Source Extensions <video> with muted & autoplay freezes on first frame on mobiles

I attempted to add a Hero background video to our website. It's being served from mux.com.
I use it with HLS, but for Chrome it uses Media Source Extensions from what I gather.
I know that for HTML5 video to auto play, it has to be muted also, and I have both parameters over there.
Apparently, on Android Chrome I get behaviour where it freezes on the first frame (black), but doesn't continue and I cannot trace why.
In case of freezing, it still does load the video, just that it's not getting autoplayed.
I am out of clues.
Isolation sandbox:
https://codesandbox.io/s/32yky6x7mq
https://32yky6x7mq.codesandbox.io/
In my attempts, I have reduced this down to simple HTML app with Hls.js library and basic <video> tag where it breaks on mobiles.
How do I get the video to autoplay on mobiles?
P.S. To see exactly what I have tried, please see edit history, as I have been trying lots of things.
On my device specifically, Android Chrome, it's caused by Data Saver.
Disabling Data Saver, the video autoplays.
It's paradoxical, because with Data Saver I expect for the video to not be loaded at all, but it's getting loaded and the autoplay gets interrupted instead - resulting in more waste.
Possibly, there are other settings out there in the wild that prevent autoplay, for instance, couldn't find the exact reasons why iOS is not working. There are hints about playsinline attribute, which I have not tested yet. (Will update when I do)
Worth noting, is Feature-Policy header too: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
It didn't help me in my scenario, but it can probably be related with autoplay in other scenarios.

html5 audio and WebAudio are BFFs - are they?

i am coding on a custom player for quite a while now.
My plan was to use soundcloud as my backend. And the HTML5 audio Tag as my streaming object.
I also want to include a Canvas for a bit of visualisation. And thats were the problem starts.
For the Visuals to work on both Browsers, I need to load the audio into an arraybuffer via xhr request. But then I can't use the audio Tag anymore. Which is sad, because by now I know how to code all the functionality i need based on it.
I found the article on html5rocks about html5 audio and WebAudio being best friends.
There is also an example on how to use the tag with an frequency bar visualizer. BUT
this only works on Chrome, because Firefox - maybe some of you have noticed - will play .mp3 files but inside a video object. For the visuals to work I would need .ogg files for Firefox. But then i can't use soundcloud as my backend anymore.
So do i have to rethink the whole player - or is there a way to decode the audio on both browsers while using html 5 audio?
thank you very much.
That's an issue with FF (no MP3 support in <audio>). But can't you get a media stream from the element also? It shouldn't matter that it's a not an - audioContext.createMediaElementSource should work on that, too.

youtube.com and html5 video tag

I have a question. I know youtube has supported html5 for some time, so I just tried disabling the adobe flash plugin and took a look at the page source. I found no video tag. Could anybody explain that?
Using chrome, after disabling Flash, I do get a warning when trying to watch videos ("You need Flash!"), but it detects that I don't have flash, and uses the HTML5 version instead. If you use Chrome, you can look at the DOM with the developer tools (F12), and you'll indeed find a video tag in the video-container div, e.g.
<video class="video-stream" x-webkit-airplay="allow" src="http://o-o.preferred.twtelecom-dfw1.v15.lscache5.c.youtube.com/videoplayback?sparams=cp%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cexpire&fexp=900161&itag=43&ip=207.0.0.0&signature=55FCBF36A597656FECBEC8E78051B3BD30EE8D97.8F8D573710D767EAF4429FBC54C940DF7611A1BE&sver=3&ratebypass=yes&source=youtube&expire=1330650696&key=yt1&ipbits=8&cp=U0hSRVZQTl9OUENOMl9OSlJHOlBlcHJOMW9PSHhH&id=381980b5e867a1c5" data-youtube-id="OBmAtehnocU"></video>
For almost everything Google does on the web they use javascript. Most likely what is happening is that they test the browser to make sure it supports HTML5 video, they then load the the video dynamically using javascript.
To verify, use a web browser tool to inspect the current html as it's shown, not as it's sent to the browser.
And as Marius noted, be sure to have HTML5 enabled

HTML5 Video not auto-playing

I'm requesting this chunk of html from a mysql database:
<p>Hello.<br><video src="video/hi.mp4" width=100% height=100% autoplay="autoplay"></video>
It displays, but won't autoplay. On a static HTML page it goes off without a hitch.
The request comes from an ajax call for a matching keyword that is being typed into a input bar.
Any ideas?
Only thing I can imagine is that the browser has not finished loading the page and or not getting a onload(). Can you start the video using a script?
<video id="video" src="video/hi.mp4" autoplay ></video>
<script>
document.getElementById("video").play();
</script>
Aren't some quotes or attributes missing?
<video src="video/hi.mp4" style="width:100%; height=100%;" autoplay="autoplay"></video> ?
Your web browser doesn't know that the HTML came from an SQL database, so it's not likely that it behaves differently in the two cases. I'm inclined to assume that there is some other problem with the page.
What are the URLs of the static and dynamic pages? Does the relative URL "video/hi.mp4" resolve to the address of your video correctly in both cases?
According to http://pauljacobson.org/2010/01/22/firefox-and-its-limited-html-5-video-support/, Firefox only supports ogg formatted videos.
Fixed mine by using autoPlay instead of autoplay.