How can I stream video files I have sitting in Google Cloud Storage on iOS?
If I try to play the video URL in iOS, the whole video gets downloaded and then played. That takes too long. I want to stream the video in 10 second chunks.
Google's Cloud Storage allows you to stream data to mobile making use of Signed URLs and a front-end or an app that serves the content.
It's really important to first set the right Content-Type in your objects of Cloud Storage. If not, the browser will download the file instead of playing it.
This would be the steps for this approach:
First you'll need to create the Signed URL of the content you want to serve using gcloud commands:
gsutil signurl -d 10m Desktop/private-key.json gs://example-bucket/cat.jpeg
Or it can also be done with third party libraries. In this other post they show how to do it with python.
Serve the result link on the front-end/app you want to present the content. Here is an HTML example:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="video-signedurl.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
Related
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/
I want to play video file in my application, so I write below code for the same
<video width="640" id="videoPlayer" style="background:black" autoplay controls>
<source src="/cam01/2017-11-07_17-04-25.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
The cam01 folder is in Tomcat's webapp directory (/apache-tomcat-7.0.70/webapps/cam01), but I'm getting following error in console log
Even when I'm trying to hit url http://localhost:8080/cam01/2017-11-07_17-04-25.mp4 directly on browser to see video, I'm getting following error...
Here is how you can play videos on a page from the local directory or remote directory:
<video src="[ YOUR VIDEO ].mp4"
controls
width="720" height="480">
Your browser does not support the video element, please #D try downloading the video instead
</video>
Please check the compatibility of the browser that your trying to test playing in through:
https://caniuse.com/#search=video
The current state of support for the element is below:
It is also preferred if you could play webm format instead of mp4.
If it still does not work make sure you have flash installed.
https://get.adobe.com/flashplayer/
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 have MP4 video files encoding at different bitrate to be compatible for both iOS on Wifi and Edge connection. I would like to have them progressive loaded form my website using HTML5 video tag.
video_big.mp4 encoded for iOS on Wifi
H.264 Baseline, 25fps, 640x480, 500kbps
video_small.mp4 encoded for iOS on Edge/3G
H.264 Baseline, 25fps, 320x240, 56kbps
My question is: How can I write the HTML5 video tag to serve video_big.mp4 to iOS devices that connected through Wifi, and serve video_small.mp4 to iOS devices that connected through Edge/3G? I'm running on PHP/Apache server. Thank you :)
Unfortunately you can't as currently there's no reliable method of detecting the type (or speed) of network a device is connected to.
At the moment the best you can do is to rely on media queries to assume (perhaps incorrectly) that a small screen means a small device and therefore give them the lower res video regardless of their network connection speed.
For example:
<video controls>
<source src="video_small.mp4" type="video/mp4" media="all and (max-width:360px)">
<source src="video_big.mp4 " type="video/mp4">
</video>
What you are looking for is HTTP Live Streaming or HLS. The configuration of that is based on M3U playlists and the videos are stored as MPEG-2 TS file into fragments of equal length, kept as .ts files.
Or open them in a UIWebView? Their videos are in .swf format though.
Thank you.
EDIT: Okay, so I can get it to play in UIWebView, also when you click on the video in the UIWebView it will play the video in fullscreen. So am wondering if I can just get the code of when it clicks to fullscreen, and use it in some button I have.
Did that make sense?
Oh and thank you again.
Try embed the iframe snippet from Youku into your webview
<iframe height="498" width="510" frameborder="0" allowfullscreen
src="http://player.youku.com/embed/XNTY4ODU0NzQ0"></iframe>
I got it working on Android, but not tried it on iOS yet.
<video width="480" height="320"
src="http://v.youku.com/player/getRealM3U8/vid/XMzkxMTM3MDQw/type//video.m3u8"
controls>
<embed src="http://player.youku.com/player.php/sid/XMzkxMTM3MDQw/v.swf"
allowFullScreen="true" quality="high" width="480" height="320"
align="middle" allowScriptAccess="always"
type="application/x-shockwave-flash"></embed>
</video>
Just use the above HTML in a UIWebView for Youku. It can be played on iOS device and PC. Replace the XMzkxMTM3MDQw with the corresponding code of the video.
As you will easily be able to verify on the internet, Flash (.swf) is not supported on iOS devices. Maybe they offer their videos in another format, otherwise this won't work.
Update: I guess you're just opening the website in your web view. So that means on their web site they have an iOS compatible stream. You can fetch the stream data from the website's source code and build your own web site (stored locally on the device) that only displays that video stream in an UIWebView. Or you use MPMoviePlayer or HTTPLiveStream, whatever. However, make sure that this is allowed/legal, I can't help you there since I guess it heavily depends on what you want to do with your app.
See here to get the url of .m3u8 file for a youku video by its ID, and simply embed it into a <video> tag