I have a website that let's my users load videos. I have a simple file input form. Since users are all mobile or tablet users the phone or tablet prompts them (via the browser) to record a video that will be used as the input.
<input type="file" id="ikid-foto" name="ikid-foto" accept="image/*,video/mp4">
I then allow them to preview the video:
var fileItem = document.getElementById('ikid-foto');
var files = fileItem.files;
var file = files[0];
var url = URL.createObjectURL(file);
var video = document.getElementsByTagName('video')[0];
video.src = url;
video.load();
I then use jQuery.ajax to store the video file on the server. On another page I let the user view the video he has previously loaded in the site, this is simply done by putting the url of the video as source to an htm video html tag.
<video width="300" height="225" src="<?php echo wp_get_attachment_url($foto);?>" controls playsinline type="video/mp4"></video>
This usually works with no issues. But there is an exception.
Since users use different browsers and devices I get some users that upload videos with file type video/mp4 files, but other upload video/quicktime videos.
The problem occurs on some cases of video/quicktime videos.
If the user is on an iPhone or iPad and he is using a Safari browser he is unable to view the videos once they have been uploaded to the server.
So, if the user is on an iPad with Safari he can upload the video he is recording. That quicktime video will be shown on the preview. But when he browses a page that want to play that video the video is not shown.
If that same quicktime video that has been uploaded to the server is viewed from a device that is not an iPhone or an iPad it can be viewed with no issues. Also, if the I try to view the quicktime video from an iPad or iPhone but I use Chrome instead, I CAN view the video.
I have read other questions with similar problems that indicate to use the playsinline parameter in the html video tag, but with no success. I've tried other options and no change.
My website is a wordpress site. I tried to download the quicktime video that was recorded on an iPad and directly upload it to my web site server. I then tried to see the video from the wordpress admin panel for media and Wordpress does not show the video.
Any thoughts on what to do so I can have iPhone and iPad users record videos and have them be able to see them later after storing on my server?
Found out that it was a plugin causing the issue. The Super Progressive Web Apps plugin was generating a conflict with Safari in the way it used it's service worker. Issue not solved yet.
https://wordpress.org/support/topic/it-will-cause-issue-media-error-formats-not-supported-or-sources/
Related
I have used YouTube Iframe API to view videos in my html page.
My code works correctly on my browser.
I have packaged the HTML and created the Cordova android app.
Now I am not able to play some videos and getting error message.
The following is the error message
"This video contains content from Tseries Music. It is restricted from playback on certain sites"
Please tell me the root cause and solution.
I've implemented a mobile web page that allows users to record a video and upload to a server. I've used the HTML5 media capture input method:
<input type="file" accept="video/*;capture=camcorder">
This launches the camera as expected and I can proceed through the upload process. However on iOS I can only record 1 minute of video footage.
When I've done something similar in a native app there is no limit to the length the recording.
Is this a limit set by default on iOS due to memory and is there any way to change this?
I've searched everywhere but can not find any information about iOS limiting the duration of a video recorded via a mobile web app.
It might have to do with how much RAM is on your device and the video quality set in your device's Photos & Camera > Record Video settings. These are the options on an iPhone 6S (2G of RAM).
Higher quality video takes up more RAM/minute, at least until the video is uploaded to the web server.
Once recorded the video is compressed and uploaded. I've written an article of how Safari on iOS compresses video when recording through HTML Media Capture.
PS: There is no way to specify a limit mentioned in the HTML Media Capture Standard.
I am working with a school group that has a Django website with a page that allows the users to press a button, record audio, and save this audio to their user pages. This website was built to work on computers and Samsung tablets with Dolphin browsers using the HTML Media Capture to capture the audio by launching the microphone app on the tablets. The group wants to now switch to iPads. I have been researching ways to launch the microphone app from iPads but it seems this is not possible using HTML5. I have done some research and seen the links below, but I don't know what the best strategy is to modify the existing website to make it work on the iPad.
What is the best way forward to allow this group to record audio (not video) from their iPads using a browser-based website?
Research--
http://caniuse.com/#search=getUser - shows getUserMedia will not work on iPads
http://www.html5audio.org/2012/11/capturing-audio-on-ios-6-via-the-videotag.html - looks pretty hacky, does it work?
How to record and play voice in ios6 using HTML5 - using PhoneGap might work, but how would the recording app be launched from the browser and then save back the audio to the users account?
Thanks,
Lee
After having the same problem for a year, I found a new article with a solution: How to record audio from a mobile web page on iOS and Android
One of the newer APIs available is the MediaRecorder API. My first attempt at building this application started with this class. I implemented the entire application and it worked great on my desktop. It was easy to capture audio and the data was already compressed into .ogg format and ready to ship to my server. Then I tried it on iOS. It turns out that the MediaRecorder API is not supported and wouldn’t meet my needs. After I stopped cursing Apple, I began again from scratch.
... That was the last piece of the puzzle that allowed me to construct a working demo and it revolves around three steps:
1. Capture the microphone so we can begin recording
2. Accumulate captured audio data into a series of byte array chunks
3. Combine the chunks into one large array and massage the array into the format of a .wav file
There is a bunch of code on the website. And here is the demo file: https://www.gmass.co/blog/wp-content/uploads/2018/03/wzrecorder.zip
I have tested it and it works on iPad.
Demo: https://q2apro.github.io/wzrecorder/
Safari iOS does not (yet) support the accept="audio/*" part of the <input> element even though it does support taking videos and images through HTML Media Capture.
<input type="file" accept="audio/*" > on iOS 10 will prompt the user to select between:
Take Photo or Video
Photo Library
iCloud Drive
More...
The same code works just fine in Chrome on Android.
Safari in iOS6 was the 1st mobile Safari to support the <input ... > element and I've tested all the way up to iOS10. Chrome on iOS uses the same rendering engine so the same limits apply.
I'm struggling to get simple audio playback. I've got a list of tracks, each at unique url's that I would like to play when a user presses the associated play button. I've attempted soundmanager2 and jplayer but couldn't get it to work for my use case (desktop browser and ios). I have fallen back to straight up html5 with the code as follows
<audio controls>
<source src="/path/to/file" type="audio/wav">
Your browser does not support the audio element.
</audio>
This works perfectly in desktop chrome and desktop safari. In ios chrome and ios safari (latest) the player isn't presented, but instead a message within a grey box saying "Cannot play audio file" is presented.
Am I using this tag correctly? How can I overcome these errors?
Update 1
I am sending the wav file from google appengine (as a blob). I have found that safari cannot play unless I add .wav to the end of the src - despite the src just being an indirect link to the file. The actual file returned does end in .wav but Safari isn't smart enough to recognise this.
Update 2
The following works in all browsers (mentioned above) - so it is not specific to wav files.
<audio controls preload="metadata">
<source src="http://www-mmsp.ece.mcgill.ca/Documents/AudioFormats/WAVE/Samples/AFsp/M1F1-Alaw-AFsp.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
I've sent the file from google app engine as both a MIME attachment and a raw response but it makes no difference.
Update 3
I've swapped in a longer wav file (http://www.villagegeek.com/downloads/webwavs/ever_again.wav) and this too is unable to play (on ios). It isn't clear if it's because of the length, size or some other variable.
Update 4
I've ruled out size being the issue because this 24s wav file works
<audio controls preload="auto">
<source src="http://www.dailywav.com/sites/default/files/wavs/dontlikelaughing.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
Update 5
So I'm serving the file from a google cloud storage bucket. When saving the file I'm not specifying the MIME type and as a result it is being returned as binary/octet-stream. The desktop browsers are smart enough to overcome this, but the mobile browsers are not.
So I'm serving the file from a google cloud storage bucket. When saving the file I'm not specifying the MIME type and as a result it is being returned as binary/octet-stream. The desktop browsers are smart enough to overcome this, but the mobile browsers are not. The answer to the above question is therefore to set the MIME type for the relevant file upon writing to GCS.
I am writing application to show youtube videos.
In WPF on windows 7 I use WebBrowser control and it works fine. But when I use WinRT WebView control to show swf file from youtube - it doesn't work. Only clear white screen.
I use approach like that : http://blog.tedd.no/2010/06/27/embedding-youtube-in-wpf-webbrowser-control/
What shall I do to have an oppotunity to show videos in Metro Style Application?
Thank you
try this one from the mytoolkit library: http://mytoolkit.codeplex.com/wikipage?title=YouTube
The default youtube video player (unless the user has opted into the HTML5 preview) is a Flash video control. Flash is not supported in the Windows Application Store ("Metro") shell version of IE, or in the WebView control.
But what you can do is request youtube to use the HTML5 video player (HTML5 video is supported by the App Store version of IE and WebView). For example, this video does play properly for me:
<WebView Source="http://www.youtube.com/watch?v=cTl3U6aSd2w&html5=True" />
So you should be able to embed a video using a webview, you just have to force the webview to use the HTML5 viewer. This can also be done as a parameter to the embed URL: see Force HTML5 youtube video
However, this setting only says to prefer the HTML5 player. Youtube may still attempt to use the flash player on some videos, which will not work in all cases.
You can alternatively also play the video through "mediaelement" to play youtube video, though you'd have to parse the youtube video stream first. See my W8 app "RedditTV"