Develop Reference

HTML5 video tag doesn't work on mobile

I have TV video stream (which is apparently mpeg-ts stream), if I use html5 video tags it all works find on win/mac machines using Chrome.
<video id="player1" width="640" height="360" preload="none" controls playsinline webkit-playsinline>
<source src=""http://192.168.1.72:9981/stream/channelid/2013555866?ticket=388550710ddf21ad5c6ffd61fcd3d0dc24cf46d2&profile=matroska type="video/webm">
</video>
But that doesn't work on Android tablet nor on iOS.
I have tried installing multiple different JS player, such as mediaelement, plyr, video.js, mpegts... And I have installed like all three browsers on Android tablet - Chrome, Opera and Mozilla for testings. Every single JS player works fine if I watch the video from my laptop (Chrome), but none of them works when I access from Android device.
The furthest I can get is using Opera+plyr(or video.js) to get an audio playing fine, but with a black screen, no video.

add this as your video starting tag and it will autoplay for android and safari mobile :
<video autoplay="" muted="" loop="" playsinline="" id="vid" preload="auto" width="100%" height="100%">
you also need mp4, ogv and webm formats for crossbrowser

This might work for you. It works fine for me.
<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline>

I would try enabling controls as on iOS if your video is supposed to start automatically it will not allow it.
Another thing is to try adding an HTTP Range Header, it helps to split video into byte ranges which is something to take into mind with mobile. This is more for iOS in general but take a look at this link: http://fdiv.net/2013/05/17/getting-html5-video-work-ios-mobile-safari
Also as mentioned by other check the format of your video you should ALWAYS have multiple types available.

Video tag doesn't work on mobile. What I've seen people do lately is use gif's as the poster of the video on mobile. I would also look into tools like Wistia for extra video support. Gifs work on mobile, but as the video assets, they take a while to load since they're usually big.
I don't recommend self-hosting as you won't have a ton of support such as slowly loading the video or dynamically switch from 320p version to HD version as it loads, etc.
For example https://wistia.com/learn/marketing/boost-engagement-with-gifs

If you're using a separate host for your files, its server should have a valid SSL certification like my case. My android video player did not work until I added a certification.

HTML 5 AudioElement won't play mp3 Livestreams in safari on IOS 11 devices

I'm a web developer at a radio broadcaster. Since the release of IOS 11, we received several user complaints that our audio live streams can't be played on IOS 11 devices anymore. To embed the streams in our websites we use the HTML5 AudioElement. When debugging the javascript on an iPhone whit IOS 11 we recognized that calling the audio elements play() method resulted in a MediaError of ErrorCode 4 (MEDIA_ERR_SRC_NOT_SUPPORTED). All other devices (Android, Windows and IOS 10 and below) play the streams without any problem.
I created a little codepen example
<audio controls>
<source src="http://hr-hrinfo-
live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3"
type="audio/mpeg;codecs="mp3"">
Your browser does not support the audio element.
</audio>
https://codepen.io/ampersand83/pen/pWwgKm in which I just create an AudioElement via the AudioTag and hand the source Tag one of our stream URLs.
Devices running IOS 10 and below play the streams without any problem as well as current android or windows devices. However, a device running IOS 11.0.1 can't play the stream. I can't find any information on why this wouldn't be possible anymore. Does anybody have an idea why our streams won't work anymore and can give us advice on what we can do to make them work again?

This issue is down to Apple WebKit changing in the latest iOS release. For users running KH Icecast a fix can be expected soon (hopefully!) https://github.com/karlheyes/icecast-kh/issues/172

Adding a simple audio control like this
<audio controls>
<source src="https://swr-swr3-live.sslcast.addradio.de/swr/swr3/live/mp3/128/stream.mp3" type="audio/mpeg;codecs="mp3"">
</audio>
…does not play.
While this one does:
<audio controls>
<source src="http://mp3-live.swr3.de/swr3_m.m3u">
</audio>
The only difference I can spot is that on an MP3 it fails while a M3U playlist works.
On iOS 10 and below as well as on current macOS Safari, it works both.
Also Chrome on iOS 11 fails (same Webkit engine?!)

I saw this same issue when trying to load a local HTML file with audio controls into a UIWebView. However, my file was an .m4a audio file. I found that just removing type did the trick. So my HTML looked like this:
<div class="audio"><audio controls><source src="my_local_audio_file.m4a"></audio></div>
Using type=audio/mp4 also worked for me. So I'm guessing it's an incompatible mime type and just removing the type would be the best option.
Hope this helps.

JW Player Error loading media: File could not be played

We ran into a very strange problem with JW Player and really don't know an approach to solve it.
JW Player shows the error:
Error loading media: File could not be played
sporadically across all browsers and platforms (sometimes it shows up and sometimes not). It took me over 30 reloads to get it and some of my colleagues got it with their first try. It's behavior is very inconsistent and kind of random.
We're using FirstSpirit as CMS on an Apache Tomcat instance running on Windows server. The problem occurred on Chrome, IE and Firefox across all versions.
The MIME types of all videos are correct as their codecs are. If supported, JW Player is running in HTML5 mode. We use Flash only for older browsers (IE8 groan).
I would appreciate any help. Thanks!
Marcus
UPDATE:
Example page with video box on the right side. Example page with video
UPDATE:
We updated the version as Ethan from JW Player suggested, but it's still not working properly.

I would suggest to encode the video in .mp4 and .ogg. (MP4 is supported in Safari and IE9, Ogg in Firefox, Chrome and Opera and as you mentioned IE6-8 uses flash only). Thus your video element will look something like:
<video width="300" controls>
<source src="my_video.ogg" type="video/ogg">
<source src="my_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
This will ensure that the video will be played if the browser support HTML5. I hope this helps

mediaelement js says that webm file is damaged and can not be played

I'm having a problem with mediaelement js and webm files in FF. I have converted a mp4 vide into a webm file, and made it available on my server. I'm using the code below.
<video width="320" id="player1" height="240" controls="controls">
<source type="video/webm" src="somefile.webm" />
<source type="video/ogg" src="somefile.ogv" />
<source type="video/mp4" src="somefile.mp4" />
<-- there is also a flash fallback which is working fine in FF, but I've removed it here to simplify the example -->
</video>
This works fine in all browsers except Firefox. It tells me that the file is damaged and can not be played. But, if i open firebug and open the webm-file by selecting "Open in new tab" - the video is loaded from my server and played correctly - in Firefox.
Is there anyone else who has come across the same problem and knows a solution to it? I've been searching, but i seem only to find answers saying that the file doesn't have the correct mime-type. I don't think that's the problem in my situation, since it plays very well in FF when i open it in a new tab, and not playing through mediaelement js.
Edit: The response headers in firefox, for the file that is "damaged" says "Content-Type video/webm"

Seems like the server did not set the correct Content-Type after all. I got it fixed, and now it works like a charm.

How do I minimize loading time for html5's audio tag?

Good day,
I am trying to build a simple music player using the html audio tag and some javascript. When I was coding it worked ok while the files were stored locally with both safari (on an Imac) and Firefox. Then I uploaded it to my web page to test it live and had these issues:
(1) Safari on the Imac takes about a minute to load the file and start playing
(2) Safari on the iphone doesn't autoplay the files although I used the autoplay attribute in the code....see code below)
(3) Firefox just doesn't play it! (although it played just fine when the files were local)
Seems like the files are too large....my questions are: (1) is there a way to make the loading time shorter? and (2) any idea why the autoplay doesn't work on the iPhone Safari and how to get around it?
Here is the code I used for the songs:
<audio autoplay="autoplay" controls="controls">
<source src="../audio/3.ogv" />
<source src="../audio/3.mp3" />
Your browser does not support the audio element.
</audio>
thanks for your help
diego

I believe you cannot autoplay on the iPhone. I think this is a restriction imposed in order to prevent excess accidental data usage. There were some workarounds to create a fake click, but they seem to have been patched.
Firefox doesn't support MP3 via HTML5. ogv files are Ogg Video, not Audio (ogg), which could be why it's not playing in the audio tag.
As for loading time, the best way would be to compress the file as much as possible. This would reduce the download time.

Just a heads up ... since HTML 5 isn't XML based syntactically, you don't assign attributes like that.
use <audio autoplay controls> as the opening tag.