I wrote a basic range request class I was wanting to flesh out so html5 video and audio players could interact with my MVC app.
I have it functioning (but not fully featured for things like If-Modified) if I don't add the extension to the 'src' tags. Thing is on the routing I can't get any string with a "{filename}.{extension}" style of route to work. My guess is anything like that is assumed to be a static file and thus I never get the opportunity to fulfill the request. If I add a source without the extension it works.
So this works
<video id="my-video-player" class="video-js" controls preload="auto" width="640" height="264" src="#Url.Action("Index","Video",new { id = "SampleVideo_1280x720_20mb" })" 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>
but this doesn't
<video id="my-video-player" class="video-js" controls preload="auto" width="640" height="264" src="#Url.Action("Index","Video",new { id = "SampleVideo_1280x720_20mb.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>
Does anyone know how I could make certain extensions potentially reroute to a handler of my choosing?
Edit:
Linked below is a method to make it work on 1 path, ideally I'd like to inject it so I could do it for any path, so I'd like to keep it open to see if anyone has more insight. As this method still would require you to have an IgnorePath also to make sure any direct path to your media files aren't handled by the static file handler instead of your MVC path.
<system.webServer>
<handlers>
<add name="Media-Handler" path="/Video/*" verb="GET" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"/>
</handlers>
</system.webServer>
Related
I have the following code in my razor view which outputs the source tag:
#Html.Raw("<source src=\"" + #mediaItem.Url + "\" type=\"" + #mediaType +"\">")
It is looped x number of times depending on the presence of multiple file formats.
The issue being that the output returned is as following.
<video><source src="x.mp4" type="video/mp4"><source src="x.webm" type="video/webm"></source></source></video>
Which gives me an w3 validator error on stray end tags for
I have no idea where or when the tags are being closed or why.
Any ideas on how to stop it from closing the tags?
A bit more of the code, updated the source part to not use Html.Raw per suggestion, but still generates the same issue.
<video id="frontCoverVideo" width="1920" height="450" playsinline autoplay loop muted controls>
#foreach (var mediaItem in coverMedia)
{
<source src="#mediaItem.Url" type="#mediaItem.Type">
}
</video>
Why are you using Html.Raw in this case? It's not recommended to use it that way. I don't see any reason.
Assuming the Video Sources are a List<VideoSource> in your ViewModel.
<video>
#foreach(var source in Model.VideoSources)
{
<source src="#source.Url" type="#source.MediaType" />
}
</video>
Any reason for not doing it the standard way?
UPDATE: Changed Code, added self-closing Source Tag to maybe fix issues lying within Umbraco
So here is the point. I have some files downloaded on my device. Because can be video,mp3 or pdf, it can be nice to display it on a webview so its preview system will do the work for me, and I have no necessity to download any external media player.
I have this code
let's assume that this path:
const path = 'file:///Users/MyUser/Library/Developer/CoreSimulator/Devices/D18AD5B6-22D1-4F57-A162-8A1C5DBCAD7A/data/Containers/Data/Application/BF9347EB-8EDF-45CB-9CFD-08C0C8BE3D5C/Documents/song.mp3';
<WebView
javaScriptEnabled
source={{ uri: path }}
style={{ marginTop: 0 }}
/>
My problem is when I'm trying to load the file, it always raise this error:
I suspect it's about the route of the uri. With require It renders an error as well ( module cannot be resolved).
This app is just for Ios, not Android.
Any help will be really appreciate!
Thanks in advance
I got it!!!
It was rough but finally, I get it.
I did it with a webview finally. What I did:
<WebView source={{ html: `<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video
</video>
</body>
</html>` }} />
With this one, thanks to #marx_tseng I injected HTML on the webview, so I took advantage of the media player from the browser.
I had to load the video/image/mp3 from the bundle.js.It is loading previous when you invoke a webview. In this example, I use RNFetchBlob just to point to the folder that my documents are stored inside my device.
const html = `<script src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,</Webview>
Finally, this is the code result:
const html = `<script
src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,
html: `<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video
</video>
</body>
</html>`
}}
/>
Here #plougsgaard Provided with this solution.
https://github.com/wkh237/react-native-fetch-blob/issues/197
I hope that this answer can help if someone is stuck in the same situation.
Cheers!
You cannot play video in webview. please use npm packages like react-native-video it will help you to play videos with more controls
this maybe help you, using html video/audio tag
I can't get p:media to work, tested with Chrome and IE, different Quicktime- and Windows-types over StreamedContent (see example below) and by referencing it from the resources-folder (value=/resources/clear.avi) of my webapp. No video starts to play although loading & rendering seems to be "working" per se. The player shows up and the loaded video seems not to be broken while the files aren't for sure (playing works on desktop usage). When using StreamedContent, I start to render after loading the video.
My config:
PrimeFaces 3.5
Apache MyFaces 2.1.12
Jetty 9.0.4
What can be wrong here?
<h:panelGroup id="video">
<p:media value="#{contentEditorBean.media}" width="250" height="190" player="windows" rendered="#{contentEditorBean.media != null}">
<f:param name="autoPlay" value="false" />
</p:media>
</h:panelGroup>
I have a simple view that I'm using to test out video.js; it looks like this:
<script type="text/javascript" src="~/Scripts/video.js"></script>
<link href="~/Content/video-js.css" rel="stylesheet" type="text/css">
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<body>
<video id="testPlayer" class="video-js" controls preload="auto"
poster="~/Content/images/video-js.png"
data-setup="{}">
<source src="<url of a .mp4 file stored in my project>" type="video/mp4" />
</video>
</body>
After the page loads, I see the poster on the video player (along with some metadata information below the player that I haven't figured out how to get rid of yet). With preload="auto" I see ["Video Error", Object] immediately on page load in the console (using Chrome). If I change auto to none, I get the same non-descript error when I click the player. I cannot figure out what the problem with this error.
There doesn't seem to be any information tucked in the object that shows in the console. The best I could find, as far as description, was something that said media error. I've tried messing around with the encoding of the file a few different ways, but I consistently get the same error.
Does anyone see anything wrong with the view that I am missing (or know what in the world this error could mean)?
When specifying my source URL I was specifying it like this:
src="~/Content/something/place/etc.mp4"
Upon changing that URL to
src='#Url.Content("~Content/you/get/the/point.mp4")'
The video loads fine. I stumbled on some post that mentioned the video tag needing an absolute path, and took a stab trying this.
I'm working on Ruby on Rails 2.3.8 and the last version of rails tinyMCE plugin.
I would like users to have the ability of adding all kind of videos into the text editor. As it's now, they can add Youtube videos, and also they can upload them from their computer.
The problem is that Vimeo videos don't only create a common HTML <object> code, but they create an iframe for them, and if I try to import one of them using the Media plugin, I'll have to paste this video for example: http://vimeo.com/16430948, and it will generate the following HTML (which won't work):
<object width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="http://vimeo.com/16430948" name="src"><embed width="100" height="100" type="application/x-shockwave-flash" src="http://vimeo.com/16430948">
</object>
While Vimeo videos need the following HTML for being displayed:
<p><iframe frameborder="0" height="225" src="http://player.vimeo.com/video/16430948" width="400"></iframe></p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="100" width="100">
<param name="src" value="http://vimeo.com/16430948" /><embed src="http://vimeo.com/16430948" width="100" height="100" type="application/x-shockwave-flash"></embed>
</object>
Now, which is the difference between this two generated HTML? It's that the iframe is missing in the first code I've posted, so it doesn't work.
So, the question is: how do I add that iframe to the tinyMCE programmability so it's automatically added when a Vimeo video is embedded?
Well, you should write your own plugin (it is pretty simple) to check for changes the user made.
When a user entered a vimeo link you just grab the relevant content from the editor and put it into a new element (an iframe).
Your code should look something like this (you will have to modify it, but i am sure you will get the right direction):
// you may choose an other event to check for
ed.onChange.add(function(ed){
var body = ed.getBody();
// check for vimeo using jquery object
$(body).find('param').each(function(index, Element){
// vimeo adress is found in value
if (this.value.search('http://vimeo.com') == -1) return;
var node = this;
var iframe_not_parent = 1;
while(node.nodeName !== 'body'){
node = node.parentNode;
if (node.nodeName !== 'iframe'){
iframe_not_parent = 0;
break;
}
}
// ok, this vimeo thing is not inside an iframe - put it inside
if (iframe_not_parent){
with(document.getElementById(iframe_id).contentWindow){
var new_iframe = document.createElement("iframe");
this.parentNode.parentNode.append(new_iframe);
new_iframe.append(this.parentNode);
}
}
});
});