html5 <video> tag doesn't play mp4 files larger than 10 MB in chrome/firefox

I'm using the following code in my .aspx page

<video id="example_video_1"  controls preload="none" width="640" height="388" style="display:block; width: 796px; margin-left: 101px;"
                poster="<%= Url.Action("NewThumbnail", "Search", new { file = ViewData["Clipfile"], archiveDate = ViewData["ClipArchive"] , station =  ViewData["ClipStation"] }) %>"
                data-setup="{}">
      <source src="<%= Url.Action("Proxy", "Clip", new { file = ViewData["Clipfile"], archiveDate = ViewData["ClipArchive"] , station =  ViewData["ClipStation"] }) %>" type='video/mp4; codecs="avc1.42e01e, mp4a.40.2"' />
</video>

The video that is not playable with the above code is shared here: https://www.dropbox.com/s/i1rjligqyjzfe4x/VOSOT_ASHLEY_FOODIE%20FRIDAY_FEDERAL%20DONUTS_CCAM.mp4?dl=0

This is mp4 file of size 17 MB and this problem is in chrome browser

Please help me what am I doing wrong here!

Edit1:

I got to know where I'm doing wrong. I updated the source tag to the following and it works now(Add @ before Url.Action)

 <source src="@Url.Action("Proxy", "Clip", new { file = ViewData["Clipfile"], archiveDate = ViewData["ClipArchive"] , station =  ViewData["ClipStation"] })" type='video/mp4'/> 

Answers


It doesn't look like your opening video tag is properly colored, which leads me to believe that you have a missing ">" or that somewhere above it in your code you have something missing that is restricting the code from running properly in Google Chrome.


Need Your Help

Angular UI-Router nested route with id

javascript angularjs angular-ui-router

I've got two routes in my app, nested into each other with ui-router: