Geek Answers Handbook

Video tag not working on mobile devices

I have an ASP website that plays videos depending on the HTTP 'id' parameter

Server side:

  Public vidurl As String Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim id As String = Request.QueryString("id") Dim DT As New DataTable Dim vidInfo As VideoInfo Try If id IsNot Nothing Then Dim SQLConnection_Cont As New SqlConnection(SQLConntStr) DT = f.GetVideoInfo(id, SQLConnection_Cont) If DT IsNot Nothing Then If DT.Rows.Count > 0 Then vidInfo = New VideoInfo With { .ID = DT.Rows(0).Item("FTPID"), .Processed = DT.Rows(0).Item("Processed"), .URL = DT.Rows(0).Item("URL"), .VideoName = DT.Rows(0).Item("VideoName"), .VidID = DT.Rows(0).Item("VidID"), .Created = DT.Rows(0).Item("Created"), .MonthDiff = DT.Rows(0).Item("Monthdiff")} If vidInfo.MonthDiff = 0 Then vidurl = "http://webpath.com/virtualdirectory/content/" & vidInfo.VideoName End If End If End If End If Catch ex As Exception WriteExToFile("Video.aspx.vb", ex.ToString) End Try End Sub

Client side:

 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Video Player</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div> <div id="vidplay"> <video height="400" controls style="position: relative; top: 23px;"> <source src=<%= vidurl %> type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"/> <object data=src=<%= vidurl %> width="320" height="240"></object> </video> </div> </div> </form> </body> </html>

So, I pass the video path in the virtual directory in the global variable vidurl

When I play it in Google Chrome for the desktop, I only hear the sound in the video with a black image.

When I play it on a mobile device, a black video appears, but it does not play at all.

What could be the problem?

Please note that all videos in the virtual directory are in mp4 format.

UPDATE:

I went to the codec info in my video,

It says: MPEG-4 Video (mp4v)

Maybe a problem?

The priority is for the video to work on mobile phones.

+5
source share
3 answers

Some file formats are not supported in some browsers. Try adding additional sources for web video formats.

 <source src="somevideo.webm" type="video/webm">
+3
source

Unfortunately, playing videos in all browsers is a pain in ***. For me, the solution that still works best is mediaelement.js (even ie8). Setting up is pretty straightforward, and it's a pretty common library recommended by the best brains in the front end world. The only problem is that it is very difficult to make it responsive when using a Flash backup.

Even when you supply all possible formats, you will still see several problems, such as providing the wrong video time, various control options on all devices. Also, some converters do not work well when it comes to meeting Internet standards. best for me is http://www.mirovideoconverter.com/ for mac. Also, support for formats / codecs varies depending on the installed programs * operating system *, so it is always useful to use something as a backup (flash).

There are several other newer libraries that you can use elsewhere, but in my test most of them worked pretty poorly. The best ones are video.js (polyfill) and popcorn.

+1
source

well, I don’t know if your code matches with your sample code, but here are some tips you can try based on your sample code

 <video height="400" controls style="position: relative; top: 23px;"> <source src="<%= vidurl %>" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"/> <object data-src="<%= vidurl %>" width="320" height="240"></object> </video>
  • enclose <%= vidurl %> with quotes
  • change your data=src object to data-src

hope this helps;)

0
source

More articles:


All Articles