I had implemented the HTML5 audio in the background on the following web site:
https://praxishelena.ch
When I open the web site, or when I click on a link, I can hear music on my Windows PC, and on Android device using Chrome, but on IPhone using Safari, not.
I was implementing music, using the following:
<audio src="wp-content/uploads/foldername/filename.mp3" style="display: none;" autoplay loop />
I need music in background without controlls for stopping, pausing, and volume change.
How to enable this to work in Safari?
Best regards,
Darko
Certain HTML functions work differently or don't work on certain versions of certain browsers. Try checking what version it is using. Normally, Safari should support MP3 files. It only doesn't support .ogg files.
Related
It is argued that html5 video cannot be automatically payed in mobile browsers.
However, I found this website autoplaying video (though not looping it) on mobile:
http://campaign.nissan.co.il/qashqai0515
How is this possible?
Autoplay does not work on all versions of iOS and modern versions of Android. Both platforms require the user to click the video or a play button to initiate video play. It was made this way to conserve the devices battery life and limit cellular bandwidth.
There have been some workarounds in the past that use javascript to trigger the play event however from my testing those workarounds no longer work. Another trick is showing a sequence of images that looks like a video - Apple has done this in the past.
Note: I tested the link you provided in iOS 8 and it does not autoplay.
I have a rather peculiar problem.
I made a website, that streams from various sources, all m3u8 links (Apple HLS). I successfully made it using a viewright player but I wanted to support mobile devices so I set it up with videojs - and it works perfectly. With the current setup people have to install a viewright plugin, which is fine, but I want to avoid that by using html5 and make it more userfriendly.
I have tried both using CDN and Self-hosting as described here:
https://github.com/videojs/video.js/blob/v4.3.0/docs/guides/setup.md
My videojs related code is as follows:
head:
<link href="//vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.2/video.js"></script>
Body:
<div class="row">
<div class="span7">
<video id="vid" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="640"
poster="my_video_poster.png"
data-setup="{}">
</video>
</div>
<script>
var myPlayer = _V_('vid');
function changeChannel(url, chanid)
{
myPlayer.src(url);
myPlayer.play();
}
</script>
In body there is also the list of streams, ofcourse. When you click on a link it changes to that stream.
Example:
StreamName
Again - the code works perfectly on my android phone (chrome) and iphone (safari) so I'm utterly confused by this.
Thanks if you know something!
edit:
In the console, when loading the page it says
ReferenceError: V is not defined
and when I load a stream it says:
TypeError: myPlayer is undefined
I tried replacing V with videojs and VideoJS (as found on other SO post) but it just said that videojs/VideoJS was not defined then.
There are some additions to video.js that will get it to play HLS content on desktop browsers.
Check out the flashls project on github, which for videojs uses a modified swf file available here under the video-js-swf project on github.
Also check out this version which is Javascript based: https://github.com/videojs/videojs-contrib-hls
First off, Apple HLS is not supported by the major desktop browsers, namely Chrome, Firefox and IE (I dont know about Opera but I doubt it). Safari on OSX supports it, Safari on Windows does not :)
Chromium and Firefox teams both have open tickets on implementing support for HLS through the HTML5 video tag, but I don't think this is going to happen soonish (Firefox has this ticket open since 3 years now ;) ). Remember that Apple HLS is in no way directly part of the HTML5 standard. The only widely supported formats are WebM / MKV / Ogg, using VP8 / Theora codec (since they are supported by both FF and Chrome).
Mobile devices running iOS with Safari therefore support HLS, and so does Chrome on iOS, since it is actually using a Safari WebKit pane to render the HTML. Also, the browser that comes with Android supports HLS (and so does the Android media framework natively), as Android developers were obviously concerned about matching compatibility with iOS enabled mobile sites.
However, Chrome (and IE) support also the MPEG-4 / H.264 codec.
IE support ONLY MP4.
Videojs has a fallback solution in Flash that is replacing the video tag when you want to player MPEG-4 on Firefox. So that is taken care off, at least.
Welcome to video streaming standards madness.
That said, you will probably have to review your video delivery strategy if you want to deliver to other desktop browser than only Safari on OSX ;) If you are using Videojs anyway , I would recommend you MPEG-4, as then you will have full browser compatibility.
However, knowing Videojs, I would say that it should throw an appropriate error when it encounters a format that is not supported on the platform.
Therefore, I think your problem is (not only) format related? Try to load any other WebM example file into your Videojs setup on Chrome or FF desktop browsers to see if that works. If it does, then obviously M3U8 / HLS format is messing up Videojs on desktop, and that would be a Videojs ticket. But, anyway, HLS wont work on desktop any way, for now.
I am doing some help videos, they are required to work on all browsers and devices - ipod/pad/phone android etc.
My understanding was you can do this with HTML5 and have fallbacks for each device/browser?
However i have had to add javascript to detect the browser then go off accordingly to different html pages where the video will play on that browser or device.
Surely there must be a simpler way to do this in ONE html page? What formats are used for each browser?
I am using ChromeFrame to get around the IE issues too.
Thanks
I recommend looking into video.js which takes care of browser support detection.
For video formats you can use mp4 and WebM together with video.js it should cover all browsers.
From the videoJS website...
Web Browsers
Whether a user has the latest version of a browser, or something
ancient like Internet Explorer 6, they'll get a similar experience
with Video.js which uses a super-lightweight Flash player for browsers
that don't support HTML5 video.
Video Formats
Web video formats can get complicated. Video.js can make it easier by using a single MP4 file for all users, or additional
formats like WebM, Ogg, and even HTTP Live Streaming for greater HTML5
compatibility.
PS. Be aware that there will be visual differences between browsers (mostly older IE browsers), especially when the Flash fallback kicks in. The fullscreen option is the most notable difference.
I need to make a basic audio control: one audio file, play and pause buttons, no more.
I cannot use Flash at all - this website will only be used if the client does not have flash enabled.
HTML5 does not seem to be a good solution because my target clients (who do not enable Flash) most likely won't have modern browsers. Even worse, Safari does not seem to play the best solution available (jPlayer).
The lastest versions of all the main browsers (IE, Chrome, FF, Safari, Mobile Safari, Android) can play audio natively using the HTML5 audio element (so long as the media is encoded in a supported format).
IE6,7 and 8 can only play audio directly in the browser with the help of plugs-ins (e.g. Quicktime, Flash etc.).
So, if you have IE8 or less i'm afraid you cannot play audio directly in the browser without Flash or another plug-in.
I'm creating an alternate page of a web site just for smartphones that needs to play an audio file. I can reformat for mp3, ogg, wav, whatever works. I've tried the HTML5 "audio" tag and tested on an iPhone, with no luck. Anyone have any ideas and/or a link to a page that works? -Thanks
Each phone is going to be a bit different, in what it supports. Many devices support Flash, but not iOS. It all depends on which platforms you are targeting.
If the audio doesn't have to be playing with the page visible, you can try just linking to a playlist file (such as m3u or pls). Any device I've tested with supports this method, except for Android. For Android, just load Flash.