Adding Video in MVc - asp.net-mvc

I am new to MVC I want to know how to add Video in MVC 2.0 using Html5. when I try to add video in Mvc like this
Video src="http://stelllent/Videos/Mvc"
It display error Video tag is not defined.

The first prerequisite is to have a browser which supports the <video> tag (IE 9.0+, FireFox 3.5+, Safari 3.0+, Chrome 3.0+, Opera 10.5+, iPhone 1.0+, Android 2.0+, ...). Then you could use it like this:
<video src="/videos/movie.avi" controls="controls">
Your browser does not support the video tag
</video>
Or if you have a controller action which is streaming the video you could also point the src attribute to it.

Related

Video Player in asp.net MVC

I want to add a video player in as.net Mvc for playing videos. I have already tried JW Player, FlowPlayer, Video.js and JPlayer. The problem is no player shown video in chrome, firefox, and safari just playing audio with a blank screen. I have checked that video in IE and it work great and if i download video from chrome and play in vlc or window media player then it run perfectly. So, please let me know which player is best? I have also unchecked disable hardware acceleration option in chrome but no improvement shown in behavior. My video type is strictly mp4. So, please help .
Thanks.
I suggest you to use the HTML5 video element.
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Here for documentation and exaple
I suggest you use Video.js. It is simple to inject into your asp.net application. Here is how:
Using Bower, install Video.js into your application
Reference the video.js javascript file and style sheet
<link rel="stylesheet" href="~/lib/video-js/video-js.css"/>
<script src="~/lib/video-js/video.min.js"></script>
In your site.js file you can add this code so that every video tag will have the video.js player
var VideoElements = document.getElementsByTagName('video');
for (var i = 0; i < VideoElements.length; i++){
videojs(VideoElements[i]).ready(function () {
var myPlayer = this;
});
}

MVC4 HTML5 video in IE10

I have tried everything I possibly could, but I was not able to solve this. I am trying to display an mp4 video using an HTML5 video element in IE9 and IE10. In IE9 I get a blank square where the video is supposed to show and in IE10 it says "Invalid Source". It plays fine in Chrome.
The video displays fine within a simple HTML file, but not in my ASP.net MVC project, whether run locally or on a web server. I have the file placed in my root folder (same folder as the web.config)
Here is my code in my ASP.NET MVC index.cshtml:
<video controls style="position:inherit" >
<source src="ExplainerVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
Any ideas?
Thanks.
Try taking away the codec and letting the browser decide for itself whether it can play it or not.
e.g. <source src="ExplainerVideo.mp4" type='video/mp4' />
Failing that, try an absolute URL for the video as I've noticed this causing issues on IE before.

Playing Youtubes with HTML 5 on iOS

I am trying load a YouTube video into a HTML 5 tag.
The problem I am having is I do not know what the “src” property should be. Using the URL for a video on YouTube does not seem to work, that URL seems to retrieve an entire page rather than just a video file.
I have been able to copy and paste YouTube’s own tag (by viewing the page source), that they use on their pages, but this is not a very efficient or long term solution. Is there a better solution?
I have tried to use YouTube’s API, but no matter what I do, it seems always to pull in the flash player version of the player (which of course won’t work for iOS.) Am I missing something obvious here?
This blog post might help: http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
The suggestion is to use this code:
<iframe class="youtube-player" type="text/html" width="640" height="385"
src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>
The iframe will autodetect HTML5 capabilities and use them; if not, it uses Flash as fallback.

video player in Grails

I'm looking for a way to add a video player into my grails app.
I cannot find any other than flash i would prefer HTML
Is there a way i can embed a HTML5 video played into my app
any Ideas?
I would suggest using the HTML5 <video> tag. It's non-flash and will work in modern browsers. If you need to support older browsers, your only real option is via a plugin like Flash or Silverlight, unfortunately.

How do you show HTML5 video's poster on iPad?

My HTML5 video syntax is nearly the same as this guy:
<video height="270" width="480"
src="media/bbb.ogv"
poster="media/bbb.jpg"
durationHint="0:4:44">
</video>
On iPhone (iOS 5.0) and desktop Firefox, I can see the poster:
But on iPad (iOS 5.0.1) it does not appear. I recall that it used to work on iPads with iOS less than 5.
Try the same code using absolute instead of relative paths:
<video height="270" width="480"
src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v"
poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg"
durationHint="00:04:44">
</video>
If that doesn't work, their CDN might be blocking external referrers so try to save the files to your own local server and use absolute paths to them.
NOTE: you don't have to use absolute paths but it definitely helps when troubleshooting.
Another solution if that fails is to use an absolute-positioned image overlay that when clicked, uses JavaScript to activate the tag below; but this is an older hack and shouldn't be required for iOS 5+.
iOS 3 definitely has a known problem with the poster attribute on video tags:
http://videojs.com/2010/09/ipad-iphone-video-poster-fix-bonus-javascript-placement-fix/

Resources