I am using PushStreamContent to stream the video hosted as a BLOB asynchronously. Here's what I've done so far
public HttpResponseMessage Get(string filename, string extension)
{
var video = new VideoStream(filename, extension);
var response = Request.CreateResponse();
response.Content =
new PushStreamContent(
(Action<Stream, HttpContent, TransportContext>) video.WriteToStream,
new MediaTypeHeaderValue("video/" + extension));
return response;
}
Where video.WriteToStream just reads the file and writes to output stream. Everything works great as I followed this article here.
This is how I'm using video.js to stream the video
<video id="really-cool-video" class="video-js vjs-default-skin" controls poster="#Model.MediaThumbnailUrl"
preload="auto" style="width: 100%; min-height: 380px; height: 100%;" autoplay
data-setup='{}'>
<source src="/api/Stream/myfilenamehere/mp4" type="video/mp4">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser
that supports HTML5 video.
</p>
</video>
I am having an issue when I try to drag the video forward, it restarts the video. Earlier I had a similar issue that was due to I missed to set content-type for a block blob while uploading. Am I missing something here again?
Related
I'm developing a ruby on rails application, and would simply like there to be a button on one of my tables' show.html.erb pages that plays a single audio file. The html.erb file below will do all of this flawlessly when it's opened manually in firefox, but not when it gets called by my rails server. Instead there is no autoplay, and the button shows up but does nothing when you click it.
<!DOCTYPE html>
<html>
<head>
</head>
<button onclick="playAud()" type="button">Play</button>
<audio id = "audio" autoplay>
<source src= 'my audio.mp3' type="audio/mpeg">
</audio>
<script>
var audio = document.getElementById("audio");
function playAud() {
audio.play();
}
</script>
</body>
</html>
Also, when I add the controls command to the html audio tag, I sometimes see the controls flash briefly on the screen then disappear.
In my final html.erb I will be using a lot of controller-created variables and such, but right now I'm just trying to get this simple issue resolved. My controller's show method is all commented out at the moment.
How can I get this audio button to work?
When I go to the rails server on the console, I see this at the end of the list of actions performed:
Started GET "/phrases/my%20audio.mp3" for 127.0.0.1 at 2015-03-24
17:29:21 -0600 Processing by PhrasesController#show as
Parameters: {"id"=>"my audio"} Rendered phrases/show.html.erb within
layouts/application (0.9ms)
So it looks like the server is recognizing 'my audio.mp3' as a parameter it needs to "GET" for some reason... no idea why it would do that.
Figured it out! I haven't been using the only default asset folder (still don't know how to add more, but I'll figure it out eventually), which is (duh) the "public" folder. When I placed my audio in the public folder and changed the source of the audio to '/my audio.mp3', it worked!
<audio autoplay>
<source src='/my audio.mp3' type="audio/mpeg">
</audio>
I'm so glad that's over... so painful!
Your code works fine if you put your media file into same dir as your html then update code to find it as
<source src= 'your_audio.mp3' type="audio/mpeg">
Avoid full path to a location outside visability of a web server (security restrictions prevent web server from seeing files in arbitrary locations) ... once working identify more appropriate media dir as defined by web server config
I currently have a problem in Dartium.
If I create a new web project in dart editor and I put a video on the default html page that is created like this :
<video width="640" height="480" controls>
<source src="sample-video.mp4" type="video/mp4">
</video>
The video isn't displayed in dartium when I run the project.
Obviously, the "sample-video.mp4" file exists in the filesystem and it can be played in another tab thanks to the vlc player plugin.
The video is also read properly when I try to display the file in Chrome, so, my mp4 codec seems OK for the browser.
Is someone have an idea ?
Thanks.
Seb.
I think .mp4 is not supported natively. I had a similar problem yesterday. Try to convert your MP4 file into webm and ogg (to support all browsers).
You can then use
VideoElement e = new VideoElement();
print("canPlay: " + e.canPlayType('video/mp4'));
print("canPlay: " + e.canPlayType('video/webm'));
print("canPlay: " + e.canPlayType('video/ogg'));
which gives me:
canPlay:
canPlay: maybe
canPlay: maybe
to detect what formats are supported. MP4 is not supported.
I'm trying to stream a mp4 file to iOS devices (iPhone and iPad) from a Grails controller:
def streamContent() {
def contentPath = "/path/to/file"
File f = new File(contentPath)
if(f.exists()) {
response.setContentType("video/mp4")
response.outputStream << f.newInputStream()
response.outputStream.flush()
response.outputStream.close()
} else {
render status: 404
}
}
this code works well on desktop browsers like safari (I see the video), but when I access to the same page with an iPhone or an iPad the video won't play. Note that if I put the same video on Apache httpd and I request it from iOS devices, there is no problem. So it must be a streaming problem.
On the html page the video is embedded using HTML5 video tag:
<video width="360" height="200" controls>
<source src="http://localhost:8080/myapp/controller/streamContent" type='video/mp4'>
</video>
I solved this problem by handling Partial Content and Range Requests (HTTP 206 status). It seems that mobile browsers/media players are using partial requests the avoid to much data transfer all at once.
So instead of doing a simple
response.outputStream << f.newInputStream()
I read only the requested bytes when the request is for a range of bytes:
if (isRange) {
//start and end are requested bytes offsets
def bytes = new byte[end-start]
f.newInputStream().read(bytes, start, bytes.length)
response.outputStream << bytes
response.status = 206
} else {
response.outputStream << f.newInputStream()
response.status = 200
}
I don't have enough reputation to comment yet, but I just want to point out that the answer above is not complete, specifically that you need to include additional headers, and that the usage of f.newInputStream().read() is not being used accurately, as it won't just read a chunk at any starting point from the input stream, but it will read a chunk from the current position, so you must use save the inputStream and then use inputStream.skip() to jump to the right position.
I have a more complete answer here (where I answered my own similar question)
https://stackoverflow.com/a/23137725/2601060
Trying to setup a test page that access a video hosted on S3 and streamed using CloudFront. The player I'm using is JWPlayer, which is supposed to work with iOS devices as well.
Unfortunately, nothing happens when I open it on the iPhone... I'm sure the answer is obvious, but it has eluded me for the last hour. Here's the code (mostly a copy/paste from http://aws.amazon.com/articles/4101?_encoding=UTF8&jiveRedirect=1):
<!-- THIS IS A BASIC HTML FILE TO PLAY MP4's USING JW PLAYER
The following code is from longtailvideo.com's 'Setup Wizard', found at http://www.longtailvideo.com/support/jw-player-setup-wizard -->
<HTML>
<HEAD>
<TITLE>
Streaming Video with JW Player
</TITLE>
</HEAD>
<BODY>
<!-- Put a header above your video, if you like
-->
<H1>This is my header</H1>
<script type='text/javascript' src='http://s3.amazonaws.com/intrinseque-video/swfobject.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('http://s3.amazonaws.com/intrinseque-video/player.swf','mpl','470','290','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','mp4:oceans-clip.ipad.mp4');
so.addVariable('streamer','rtmp://s1m21pqfl8vlrl.cloudfront.net/cfx/st/');
so.write('mediaspace');
</script>
</BODY>
</HTML>
<!--Common problems:
- You cannot have any spaces in any of your URL's (including your 'rtmp://...' URL) (i.e., http:// thereisaspaceatthebeginninghere.xxx)
- Be sure you are calling the correctly numbered version of the flowplayer objects/players (i.e. flowplayer-3.2.2.swf
- You cannot have duplicates of 's3.amazonaws.com' or 'cloudfront.net' in the same address (i.e. (http://s3.amazonaws.com/s3.amazonaws.com/YOUR_BUCKET/player.swf)
- There is a different naming protocol for mp4 vs flv files. For .mp4 files, YOU MUST write it as 'mp4:YOUR_VIDEO_FILE_WITHOUT_THE _MP4_SUFFIX'. For .flv files, you simply write the name of the file, 'YOUR_VIDEO_FILE_WITHOUT_THE_FLV_SUFFIX'.
-->
Check out http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/49/using-cloudfront
You need to add something along the lines of:
modes: [{
type: "flash",
src: "/assets/player.swf"
},{
type: "html5"
config: {
file: "http://dXXXXXXXXXXXX.cloudfront.net/example.mp4"
provider: "video"
}
}],
to the code for it to handle correctly both flash and html5.
Actually, not all mp4 files are born equal. Ones converted with weird encoders/codecs sometimes don't work on IOS. I had a case where, handbreak encoded mp4 didn't play, while ffmpeg encoded same video streamed perfectly.
I never understood what exactly was the difference. Maybe something to do where you place video metadata insdie the file.
My boss wants the following:
Requirements: Stream m4v videos from our Web-server to clients including standard web browsers (IE7, FF, Chrome, etc) and iPad!
I'm not really sure why he wants m4v...he mentioned efficiency but it may also have to do with iPad compatibility?? Anyway, I'm stuck with m4v.
I've browsed some related questions on SO, and this page is very useful as well:
http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback
So if I understand correctly, HTML5 with <video> tag will take care of all my requirements (browsers & iPad) except IE up to and including IE8.
So in my code:
<div id="demo-video-flash">
<video id="demo-video" poster="snapshot.jpg" controls>
<source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari -->
<source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->
</video>
</div>
<script type="text/javascript">
$(document).ready(function() { // ... a dash of jQuery.
var v = document.createElement("video"); // Are we dealing with a browser that supports <video>?
if ( !v.play ) { // If no, use Flash.
var params = {
allowfullscreen: "true",
allowscriptaccess: "always"
};
var flashvars = {
file: "video.f4v",
image: "snapshot.jpg"
};
swfobject.embedSWF("player.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);
}
});
</script>
As the link above explains, test if the browser supports <video>, and if not, fall back to flash. If the browser supports <video>, I don't need to worry about the player as the browser handles that. If it doesn't support <video>, I need to provide:
(a) A flash player.
(b) A flash-compatible copy of my .m4v video
Questions:
1) Will this solution work for my requirements?
2) Is .m4v a good format to stream to iPad? (I'm guessing yes as it's an Apple proprietary format!)
3) Is .m4v "flash-comatabile"? That is, if I send it to my flash player will it work? I've read conflicting reports on this. If it's not, then I guess I need to have a copy of my video converted to a flash-compatable format...any recommendations? (.f4v seems common but we already have a .mov file will that work?)
4) Last but not least, what's a good flash player. I'm leaning toward flowplayer (http://flowplayer.org/), however, we already have a swf player installed (http://code.google.com/p/swfobject/). Seems this latter one would work...any advantages to one or the other??
Apologies if some parts of this question don't make sense...there's alot of info about video out there and it's hard to piece it all together...hoping some answers here may help. I can refine my question as needed.
Thanks in advance!
Peter
As far as I know..., IE does not support HTML5 so the tag would be unrecognized in IE...