I have a small HTML5 game with Javascript and JQuery. Every thing is working fine but the audio is not playing when the application starts.
I have used "audio" tag to play the sound.
<audio id="backgroundMusic" autoplay loop>
<source src="sounds/startTheme.mp3" />
<source src="sounds/startTheme.wav" />
</audio>
This issue persists in all the browsers.
Can anybody please help or advice me some work around?
Very thanks in advance.
P.S. - I think audio tag is not supported in facebook app.
After many tries I get this thing to work. The audio was not playing because Facebook only supports secured contents. (contents with ssl).
When I generated a verified SSL certificate it started working. Before I was using a self signed certificate.
Thanks you everybody for your suggestions.
I know facebook does uses HTML5 media element for example when displaying media content to a journal on iPad.
First I would check the audio tag you are using works on a blank HTML5 page (just to be sure there is no issue with the file/server you are using).
Could not it be that just the autoplay or loop attributes are not supported? We know that Apple disables autoplay on all of its mobile devices. Maybe facebook has rolled out something similar.
Try something like this to see if it plays on user interaction:
<audio id="backgroundMusic" controls>
<source src="sounds/startTheme.mp3" />
<source src="sounds/startTheme.wav" />
</audio>
To check if HTML5 audio is supported in an environment you can use:
function supports_audio() {
return !!document.createElement('audio').canPlayType;
}
More information on this here.
Otherwise good old flash can be a fallback option.
Related
I have spring MVC project where I have kept my video on resource folder (D:/folder/videos/) and same entry is made in my spring servlet xml as like
In my jsp file I have below entry to show video
<div id="groupsign" class="tab-pane fade">
<video width="100%" height="400px" controls="controls" controlsList="nodownload" autoplay loop muted playsinline >
<source src="<%=appUrl %>/videos/FirstVideo.mp4?preview=true" type="video/mp4">
<source src="<%=appUrl %>/videos/SecondVideo.mp4?preview=true" type="video/gg">
</video>
</div>
Still it not showing the video when run my application on server. It showing blank and just searching symbol in video area. This same code/video working on android device. If I replace video source by giving any public video link then its working. I am not getting what an issue and how to resolve the same. Any guidance will help me more.
Safari
Used autoplay loop muted playsinline in video tag but not luck
In Spring servlet configure resource folder like
<resources mapping="/videos/**" location="file:D:/folder/videos/"/ >
In JSP written video tag like
<video width="100%" height="400px" controls="controls" controlsList="nodownload" autoplay loop muted playsinline >
<source src="<%=appUrl %>/videos/FirstVideo.mp4?preview=true" type="video/mp4">
<source src="<%=appUrl %>/videos/SecondVideo.mp4?preview=true" type="video/gg">
</video>
I had the same issue with the ios mobile devices and solved it.
As mentioned here : Creating Video for Safari on iPhone: "HTTP servers hosting media files for iOS must support byte-range requests, which iOS uses to perform random access in media playback. (Byte-range support is also known as content-range or partial-range support.) Most, but not all, HTTP 1.1 servers already support byte-range requests."
So you must check whether your server uses byte-range caching or else reconfigure it (I did it with nginx).
PS: Another secondary reason for ios video incompatibility could be the incompatible codecs of each video. The following compression standards are supported:
-H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile. -MPEG-4 Part 2 video (Simple Profile) -AAC-LC audio, up to 48 kHz
While I am working in web App with ASP.NET MVC , I just noticed that videos on my site are playing in Chrome , IE, Mozilla at Desktop and Android Mobiles , But it was not working at Safari iphone .. So I searched to find a solution and with some help finally I solved this problem and here are the steps:
**By using player Video-js (https://github.com/videojs/video.js/#quick-start )
<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet" />
<!--Videojs-->
<div class="wrapper">
<div class="videocontent">
<video id="myvideo"
class="video-js vjs-big-play-centered vjs-16-9"
controls
preload="auto"
poster="~/Content/images/poster.png"
width="640"
height="500"
data-setup='{}'>
<source src="video.mp4" type="video/mp4" loop autoplay controls="true" />
<source src="video.webm" type="video/webm" loop autoplay controls="true" />
<source src="video.ogv" type="video/ogg" loop autoplay controls="true" />
</video>
</div>
</div>
<script src="//vjs.zencdn.net/5.11/video.min.js"></script>
<script type="text/javascript">
var video = videojs('myvideo');
document.getElementById('action').onclick = function () {
video.play();
}
</script>
** after I added this player some of videos played fine at all devices even Safari and others videos with Error : no compatible resources or check your server ..
After many searched and tried many suggestion , the reason was found (The codec of videos must be H264 with type .mp4 ) , so I toke one of these Videos that not played cause of Error no comp… ,and with a converter program I converted it to H264 .mp4 then uploaded it again and worked , that is it … I hope that help many programmers person
With Thanks
more resources: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html
The only thing that could logically be a problem is if the videos are not encoded properly. In particular with both Safari and Mobile Safari, only H.264 encoded MP4 video is supported. MP4 is the container and can technically be used for other types of encoded video, which most likely has happened here.
Also, you need to be aware of encoding profile and level. Not all H.264 profiles are supported for all devices. You should be safe with one of Baseline, Normal, or High. High has the best compression to quality ratio of those three, so that's your best bet. The level is even more finicky. While more modern devices will support 4.2 or higher, 4.1 still enjoys the broadest support.
So specifically, your video needs to be an MP4, encoded with H.264 High 4.1.
I tried different ways to show a .mov video ("ISO Media, Apple QuickTime movie" on linux) in HTML5 page with Iphone, but it isn't working.
My code is:
<video width="320" height="240">
<source src="test.mov">
</video>
With all desktop browser (chrome, firefox....) I can show the video.
Any Idea?
Thanks in advance.
Instead of using <source> tag use <src> attribute of <video> as below and you will see the action.
<video width="320" height="240" src="test.mov"></video>
As per HTML5 standards the only videos that are trully supported cross browser are MP4, ogg, and WebM. All other video files are not guaranteed to work with the standard html5 video player.
You can read more about it at this website.
http://www.w3schools.com/html/html5_video.asp
Alternatevily you can look for other video players that can help you make this for you.
Hope this helps.
The .MOV media type (Quicktime movies) is not supported in HTML5 browsers using the video element at this time. I recommend you encode those to MP4 (MPEG4).
But you can try this HTML below. The new video HTML5 element will not work as it supports limited media types (MP4, OGG, or WEBM). Using the older HTML embed or object elements forces the browser to use a plugin to support the video, if one exists. If your Quicktime movie plays, it will depend on how Apple and their Safari browser manage the plugin or player for this media type:
<embed id="embed1" src="test.mov" type="video/quicktime" style="width:320px;height:240px;">
<noembed>Your browser does not support this media object or the embed element.</noembed>
</embed>
I know this question is already asked in past, but i finally found no answer....
So I got a shoutcast stream, encoding audio/mpeg and I want create a web-app for my iphone to listen to my stream mobile.
I tried several methods of http://mydomain.com:8000/. With semicolon, with stream.nsv, with stream.nsv&type=mp3 and so on...
I tested it everytime with the Safari browser und nothing happened. I tried several options in the html5 audio tag. preload, auto-buffering etc..... it's still quiet...
Do you have any solutions or snippets or what else?
Thank you :)
HTML5 streaming web pp for iPhone.
<audio controls=">
<source src="http://www.yourstreaming.com" type="audio/ogg" />
<source src="http://www.yourstreaming.com" type="audio/mpeg" />
</audio>
Try jPlayer I'm pretty sure it can play shoutcast stream, and it works in iPhone. The player uses HTML5, and supports flash fallback.
you very welcome,sorry i don't know the source for Android,here are links that might help you,good luck with it.
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
I would suggest Mediaelement . Its works well on most of mobile devices including iPhone.
I'm building a web site that needs to stream video and be friendly for handheld devices (especially the iPhone). Some handhelds don't support Flash so I'm avoiding the use of a Flash player. How does Youtube stream its videos so that they play on both desktops and iPhones? I'm looking for a player, or multiple players, which can be somehow activated based on the user's device.
Your help and guidance are much appreciated. Thanks.
The YouTube website and others use the HTML5 video tag for streaming playback on iPhones. It works like this:
<video width="480" height="360" controls>
<source src="test.mp4" type="video/mp4" />
<source src="test.ogv" type="video/ogg" />
</video>
In Safari (Desktop as well as mobile) and Chrome, the h264-compressed test.mp4 file will be played. Firefox will play back test.ogv. For other videos, you should still have a flash video player as fallback. You can have all the format choosing and flash fallback done automatically using HTML5Media. You might also check out SublimeVideo, which provides video player controls for the <video> tag.