vb.net 视频标签不适用于移动设备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30908964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Video Tag Not Working On Mobile
提问by HelpASisterOut
I have an ASP website that plays a video depending on the HTTP parameter 'id'
我有一个 ASP 网站，它根据 HTTP 参数播放视频 'id'
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 am passing the video path in the virtual directory in the global variable vidurl
所以我在全局变量中传递虚拟目录中的视频路径 vidurl
When I play this on Google Chrome for Desktop, I only hear the sound in the video, with a black image.
当我在桌面版 Google Chrome 上播放此视频时，我只能听到视频中的声音，图像为黑色。
When I play it on mobile, a black video appears, but It doesn't play anything at all.
当我在手机上播放时，出现黑色视频，但它根本不播放任何内容。
What can be the problem?
可能是什么问题？
Please note that all the videos in the virtual directory are in mp4 format.
请注意，虚拟目录中的所有视频均为 mp4 格式。
UPDATE:
更新：
I went to the Codec Informationin my Video,
我去了我的视频中的编解码器信息，
It says : MPEG-4 Video (mp4v)
它说 ： MPEG-4 Video (mp4v)
Could that be the problem?
这可能是问题吗？
Priority is for the video to work on mobiles.
优先考虑让视频在手机上播放。
回答by Ron
Some file formats are not supported on some browsers. Try adding additional sources of web video formats.
某些浏览器不支持某些文件格式。尝试添加其他网络视频格式来源。
<source src="somevideo.webm" type="video/webm">
回答by Maciej Paprocki
Unfortunately playing video across all the browsers is pain in the ***. For me solution that still works the best is mediaelement.js(even ie8). Set up is quite easy and is quite brodly used library recommended by the best brains in front end world. The only problem is that is really hard to make it responsive when using flash fallback.
不幸的是，在所有浏览器中播放视频很痛苦。对我来说，仍然最有效的解决方案是mediaelement.js（甚至 ie8）。设置非常简单，并且是前端世界中最好的大脑推荐的非常广泛使用的库。唯一的问题是在使用 Flash 回退时真的很难让它响应。
Even when you supply all the possible formats you still will see multiple issues like giving wrong time of video, different control options across devices. Also some converters don't work well when it comes to keeping standards for web. the best one for me is http://www.mirovideoconverter.com/for mac. Also support of formats/codecs varies depending on browse * operation system * installed programmes so is always good to use something as fallback (flash).
即使您提供了所有可能的格式，您仍然会看到多个问题，例如提供错误的视频时间、跨设备的不同控制选项。在保持网络标准方面，一些转换器也不能很好地工作。对我来说最好的是http://www.mirovideoconverter.com/for mac。格式/编解码器的支持也因浏览 * 操作系统 * 安装的程序而异，因此使用某些东西作为后备（闪存）总是好的。
There are few other newer libraries you can use other then mediaelement, but in my test most of them worked quite poorly. The best one was video.js (polyfill alike) and popcorn player.
很少有其他较新的库可以使用其他媒体元素，但在我的测试中，它们中的大多数都工作得非常糟糕。最好的一个是 video.js（类似 polyfill）和爆米花播放器。
回答by am05mhz
well, i don't know if your code is the same as your sample code, but here are some suggestions 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 your
<%= vidurl %>with quotes - change your object
data=srctodata-src
- 附上
<%= vidurl %>带有引号 - 将您的对象更改
data=src为data-src
hope it helps ;)
希望能帮助到你 ;）
回答by Ahmed Jehanzaib
Just add playsinlineattribute in video tag.
只需playsinline在视频标签中添加属性。
<video playsinline autoplay loop muted style="min-width:100%; min-height:100%;" >
<source type="video/mp4" src="//bg.cdn.ustudio.com/app/transcodes/TQAdh6DJdtuY.mp4">
<source type="video/webm" src="//bg.cdn.ustudio.com/app/transcodes/TuX1xml2yZsS.webm">
</video>