I have a very similar question to Play a Shoutcast Stream on iPhone with HTML5, but with a few differences...
I have an Icecast server running on Ubuntu 14.04 LTS, streaming an mp3. The setup follows Icecast's documentation exactly, is linked from an <audio> HTML5 tag on a website running on AWS EC2 and works in my desktop / laptop browser.
However, when I try to load the same website in iOS, on either my iPhone or my iPad, the HTML5 audio player loads, shows "Loading..." for several minutes, then either displays nothing or "Error".
The HTML5 code is as follows:
<audio controls>
<source src="http://xx.xx.xx.xx:8000/example1.mp3" type="audio/mpeg" />
</audio>
Suggestions or ideas as to why this doesn't work in iOS?
I finally got this resolved, but realized I never posted an answer.
I had to set the <audio> src value to the streaming mount point found in my icecast.xml file.
So, in my icecast.xml file, I have:
<!-- You may have multiple <listener> elements -->
<listen-socket>
<port>8000</port>
<bind-address>123.456.789.012</bind-address>
<shoutcast-mount>/stream</shoutcast-mount>
</listen-socket>
Thus, my HTML5 <audio> tag became:
For good measure, I also included the mime_type of audio/mpeg and controls to the <audio> tag, though these are not required.
Related
Only certain video files in tag are played on a white screen.
Other files with the same extension work well.
It plays when you convert the file to another extension. (ex. mov -> mp4)
<video controls autoPlay width="100%" height="100%">
<source src={videoUrl} />
</video>
I think it has something to do with the HEVC codec.
my electron version 18.0.4
Add meta to html
http-equiv="Content-Security-Policy" content="media-src *;">
The video url works well if you do it on Chrome.
I share my solution.
Just a chromium version problem.
update v100 -> v110
Make sure electron >= 22 (chromium 107 add hevc hw decoding support) will solve your problem.
While trying to embed html5 <video> tag in my salesforce web Page, I came across a wonderful library called "Videojs" (http://videojs.com/getting-started/). It served most of the purpose, however when I tried to play a video on Ipad, it failed. Then I came across this link (VideoJS: not working on IOS), which says to try to use videojs's default movie as there possibly could be encoding issue. When I did as per the suggestion, I came with a very interesting scenario. As When I fed the url(http://vjs.zencdn.net/v/oceans.mp4) directly as:
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
it worked fine both in windows and in ios. But when I downloaded the same video and saved it to Salesforce CRM Content libraries and gave the src path as:
<source src="/sfc/servlet.shepherd/version/download/id" type="video/mp4" />
it worked in windows desktop browsers but not on ipad(version 9.2). I couldn't understand the issue.
Thanks for any help/ideas/suggestions.
I am googling mostly encoding issue for mp4 file or hugesize file,so use handbreak (https://handbrake.fr/). solve the problem
I am trying to embed a local mp4 file that resides on the same server where IIS runs but on a different disk and is not part of the site (too many videos to do that). For example, my site is under C:\inetpub\wwwroot\Site while mp4 files I'd like to play are under D:\Videos. User running the site has access to this location. When I put full path to the file in the source, video does not play. What is the best way to handle this?
<video width="640" height="360" controls="controls">
<source src="D:/Videos/VideoFile.mp4" type="video/mp4" />
</video>
You don't have the right to do that, you need virtual path and not a physical one just put mp4 file inside your project directory and then specify path as...
Try using 'http://[Your server]/directory/yourmp4.mp4' or use Server.MapPath() as src of your object.
and make sure your browser supports video tag as it is a html5 tag.
I have tried everything I possibly could, but I was not able to solve this. I am trying to display an mp4 video using an HTML5 video element in IE9 and IE10. In IE9 I get a blank square where the video is supposed to show and in IE10 it says "Invalid Source". It plays fine in Chrome.
The video displays fine within a simple HTML file, but not in my ASP.net MVC project, whether run locally or on a web server. I have the file placed in my root folder (same folder as the web.config)
Here is my code in my ASP.NET MVC index.cshtml:
<video controls style="position:inherit" >
<source src="ExplainerVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
Any ideas?
Thanks.
Try taking away the codec and letting the browser decide for itself whether it can play it or not.
e.g. <source src="ExplainerVideo.mp4" type='video/mp4' />
Failing that, try an absolute URL for the video as I've noticed this causing issues on IE before.
My HTML5 video syntax is nearly the same as this guy:
<video height="270" width="480"
src="media/bbb.ogv"
poster="media/bbb.jpg"
durationHint="0:4:44">
</video>
On iPhone (iOS 5.0) and desktop Firefox, I can see the poster:
But on iPad (iOS 5.0.1) it does not appear. I recall that it used to work on iPads with iOS less than 5.
Try the same code using absolute instead of relative paths:
<video height="270" width="480"
src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v"
poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg"
durationHint="00:04:44">
</video>
If that doesn't work, their CDN might be blocking external referrers so try to save the files to your own local server and use absolute paths to them.
NOTE: you don't have to use absolute paths but it definitely helps when troubleshooting.
Another solution if that fails is to use an absolute-positioned image overlay that when clicked, uses JavaScript to activate the tag below; but this is an older hack and shouldn't be required for iOS 5+.
iOS 3 definitely has a known problem with the poster attribute on video tags:
http://videojs.com/2010/09/ipad-iphone-video-poster-fix-bonus-javascript-placement-fix/