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
Related
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.
When I embed Youtube video on a page and test it locally nothing happens or the browser even locks up, depending on the browser. Publish the page, test online and it works fine. Obviously not an ideal develop/test scenario. I'm using the iframe embed code from Youtube.
It sure seems like a cross domain security issue but I see no errors using Firebug and haven't found any reference to that nor anyone with a similar problem. Probably just missing something but I'm stumped. I don't like being stumped... for long.
Example that works online but not locally even if this is the only code in the body:
<iframe width="640" height="360" src="//www.youtube.com/embed/INg83kArY4g?rel=0" frameborder="0" allowfullscreen></iframe>
BTW, no problem embedding and playing the same video locally when hosted on my own web server (not locally). Any help would be appreciated.
The reason that file will not load locally is because you are using a protocol relative URL when defining the src attribute.
When the browser parses the src it will prepend the scheme(http: or https:) that the page is viewed in. If the page is being viewed locally, your browser will prepend file to the URL and that will result in an invalid URL.
You can remedy the issue by inserting a scheme on the src e.g.
src="http://www.youtube.com/embed/INg83kArY4g?rel=0"
or by serving up that page on a local server.
Reference
Paul Irish
Try adding 'http:' to the beginning of the src attribute:
<iframe width="640" height="360" src="http://www.youtube.com/embed/INg83kArY4g?rel=0" frameborder="0" allowfullscreen></iframe>
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/
I'm trying to use the HTML5 tag on the iPad. It works fine if the source is set to a hard-coded file:
<audio src="http://...../myFile.wav"></audio>
...but if I set the URL to a servlet or ASP.net page it refuses to play it!
<audio src="http://...../myDynamicHandler.ashx?audioId=123"></audio>
Any ideas?
Are you setting the correct contentType header before sending the wav data?
Ok, this problem also bothered me for 6 hours.
Finally I found this solution in other topic.