So basically I have a snippet which I mean to load a .m3u playlist into the audio element. The playlist is encoded as base64, loaded with data URI. However, it does not work.
<audio autostart="true" loop="false">
<source type="audio/mpegURL"
src="data:text/plain;base64,aHR0cDovL3ZpZXRjaHJpc3RpYW4uY29tL2F1L3RjLzAwMS5tcDMNCmh0dHA6Ly92aWV0Y2hyaXN0aWFuLmNvbS9hdS90Yy8wMDIubXAz">
</audio>
However, loading the same playlist with the traditional URL /playlist.m3u works in iOS. It does not work in Chrome, which is fine by me now.
<audio autostart="true" loop="false">
<source type="audio/mpegURL"
src="/playlist.m3u">
</audio>
The content of playlist.m3u:
http://vietchristian.com/au/tc/001.mp3
http://vietchristian.com/au/tc/002.mp3
The questions are:
Is it possible to apply .m3u in Safari loaded as data URL
Bonus: How can I achieve this in Chrome also?
I think the problem is in the MIME type of the data URL:
src="data:text/plain;base64,aHR0cDovL3ZpZXRjaHJp....
It should be data:application/x-mpegurl;base64,aHR..., but I have also noticed that on Apple devices the type needs to be another, resulting in data:application/vnd.apple.mpegurl;base64,aHR...
Related
I'm having problems trying to play audios in HTML 5 with the tag.
The audio is recorded correctly with the media file with compresion plugin: https://github.com/remoorejr/cordova-plugin-media-with-compression, in the Documents folder, and I can even delete the files I created, so the filesystem is not the problem, I can write in the folder. Also I downloaded the data in XCode to check if the file was there, and it was, and also used the checkFile, with the File Plugin, and it says that exist.
But when I try to play any of that audios on the HTML5 player, I can't.
This is what I have in the HTML (I'm sure the audio file exist):
<audio controls="controls" id="audio" style="width: 80%;">
<source src="file:///var/mobile/Containers/Data/Application/LONG STRING HERE/Documents/audiofile.m4a" type="audio/mpeg" />
</audio>
I tried with cdvfile:/// and withouth the file:/// or cdvfile:/// just starting with "/var/etc..." none of them work.
Thanks in advance!!
I have a wordpress website in which I want to embed the audio player for .mp3 files. But the user should not get the server url of the music file.
Currently I have used [audio src=""]. But through this user get the url though page source. So is there any way or any plugin through which I can hide it in the page source.
Also I cannot use the flash player as it has to be run on iphone/ipad too.
Looking forward for the replies
The problem with HTML5 audio and video is, that it directly links to the file.
This is also the reason sites like Netflix don't use it.
Only Microsoft Silverlight can protect your content from rippers properly.
BUT - you could use the dirty solution: Make an <iframe> and embed another html file that only contains your audio source and replace the body container with <body oncontextmenu="return false">
This will disable your users to open the context menu over your audio file and thus they will not be able to find the location of the file, however "html-pros" will just use f12 to open it.
If you only do it on this very limited part of the page, most people won't be able to get around this though. ;)
Now i am implementing a video playback on my site and for mobile devices i use HTML 5 video player:
<video src="/get_video.php/myfile.mov" controls width="400" height="250"></video>
In src attribute stored url to php file which output a contents of video file. MIME-type of file i don't know(it's dynamic) so i send content type header - application/octet-stream.
And my iPhone cant play this video: screenshot
So Question: How to force the player to play videos?
Thanks.
First of all, I recommend reading these resources on Video tags:
http://www.w3schools.com/tags/tag_video.asp
http://www.w3schools.com/tags/att_video_src.asp
https://developer.mozilla.org/en-US/docs/HTML/Element/video
As I understand, you have to specify in your MIME type a real video type (vs application/octet-stream). You mentioned that it's dynamic, however on the server side you know which file are you reading (so, you can figure out file format).
Supported types are:
video/mp4
video/webm
video/ogg
I am creating an offline webapp for the iPad 2, which includes video content. When the page first loads, the video displays fine. But when I reload the page, the video's play button becomes broken.
I've gone into Settings > Safari > Advanced > Website Data and, sure enough, the video is in the cache... So the problem seems to be that it is not being retrieved from the cache.
My HTML code snippet:
<html manifest="cache.manifest">
...
<video width="320" height="240" controls="controls">
<source src="videos/movie.mp4" type="video/mp4" />
</video>
My cache.manifest snippet:
CACHE MANIFEST
# Updated 2012-08-22 19:49:00
index.php
...
videos/movie.mp4
For good measure, my .htaccess snippet:
AddType text/cache-manifest .manifest
AddType video/mp4 .mp4
Does anyone have any ideas?
This unfortunately isn't an answer but after now 20 hours continuous searching and testing to resolve the exact same problem i can tell you where i am now.
This appears to be an ipad iOS specific problem where no matter what size the video / sound file is it will not draw on the cached files although they clearly are cached and on first load it plays the file OK.
I have tried making the smallest video possible.
I have looked at wrapping in a native app but that's not an option for delivery reasons.
I have tried forcing a reload of the video .src on page load using javascript.
I have tried all possible variations of the manifest file.
Looked at all the Apple developer docs i can stomach.
After reading hundreds of posts, that never actually complete, i think the answer, other than getting the client to buy Android tablets, is to use the local database to store the video in binary form to be retrieved when needed by the app. Unfortunately i am still searching for examples of this and as yet cant find any with any detail. Local saving of text / numerical data isn't a problem. I just dont know if its possible to store the raw file data and retrieve it in a local database.
Sorry its not what you were after but hope it helps point you in less directions.
An update but not much progress. I decided to use base64 ecoded mp4 and paste the text in a simple xml file. My app would read this xml video data and by using in the video tag SRC. This was about a 4MB string.
SRC="data:video/mp4;base64,AAAAA /...../ AA"
This worked fine in Chrome. When i used it on the Ipad the good points are that i didnt ever get the play button crossed out and it tried to play then flashed a message it could not complete this operation.
I had a somewhat related issue with playing video on an iPad. This was in an HTML widget that will reside in an iBooks file. My problem was I couldn't get the videos to rewind, so when you went back to that screen the video was stuck at the end (or still playing if you went back fast enough.)
The workaround I came up with was to load a different video and then reload the video I wanted to play. It's ugly, but it works, and it may provide a workaround for your problem.
var sources = videoEl.getElementsByTagName('source');
sources[0].src = "assets/TeethMouth_Anim_Part3_03.mp4"; // Load some other video into the source, in my case, a video that I'm playing later in the presentation.
videoEl.load();
sources[0].src = "assets/TeethMouth_Anim_Part1_03.mp4"; // Then reload the video I want to play.
videoEl.load();
Although now I see that this thread is a year old so it's probably not an issue anymore. Still, thought I'd post it.
i want to create an epub reader with feature like play video and audio from my iphone app.
One more thing i would like to say that it will not a web based applicaton.
i mean to say that i dont want to use uiwebview.
please any body help me thanx in adv.
EPUB3 supports tag, http://idpf.org/epub/30/spec/epub30-overview.html#sec-multimedia
So you can embed video like this:
<video id="my_video_1" width="720" height="365" preload="auto" controls="true">
<source src="../Misc/my_video_1.m4v" />
</video>
And, H.264 or VP8 video codecs are recoomended.
http://idpf.org/epub/30/spec/epub30-publications.html#note-video-codecs
The epub format is wrapped as a zip file (you can just unzip it). There was a lot of discussion about it in this thread:
Reading ePub format
So you can just add the audio/video in the zip and then runnit locally using MPMoviePlayer. If you want to be able to actually show the book you must re-implement a web engine, as epub books uses HTML to diagram. So, as far as I know, the UIWebView is the easiest way to go.