简体   繁体   English

Xamarin。在HTML5视频标签和android问题中构建webview并查看/播放视频

[英]Xamarin.forms webview and view/play video in HTML5 video tag and android issue

I am capturing video using MediaPicker from xamarin.labs and then upload that video on my web server. 我使用捕捉视频MediaPickerxamarin.labs ,然后上传我的Web服务器上的视频。 Then after, I retrieve that video to show in WebView with HTML5 video tag. 之后,我检索该视频以在WebView中显示HTML5视频标签。

This works fine for iOS. 这适用于iOS。 however the same code doesn't work on Android. 但是相同的代码在Android上不起作用。

I create custom renderer in android to create Webchromeclient but it does not play video on android. 我在android中创建自定义渲染器来创建Webchromeclient但它不在Android上播放视频。

the sample html5 with video is (I also try with type parameter in <video> tag: 带视频的示例html5(我也尝试使用<video>标签中的type参数:

<Doctype! HTML>
<html>
<body><video src="www.myserver.com/video1.mp4" controls height="150" width="150"/>
</body>
</html/>

and this is my web view part in my PCL project: 这是我的PCL项目中的Web视图部分:

public class MyWebView: WebView
{
}

this is my page: 这是我的页面:

public class VideoPage: ContentPage
{
   public VidoePage()
   {
      var webView = new MyWebView();
      webView.Source = new HtmlSource {Html = abovementionedHtml};
      var layout = new StackLayout()
     {
        Childern = {webWiew}
     };
     this.Content= layout;
}

Android renderer: Android渲染器:

[assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))] 
namespace VideoSample.Droid
{

using Xamarin.Forms.Platform.Android;

public class MyWebViewRenderer : WebRenderer 
{
     protected override void OnElementChanged(ElementChangedEventArgs  e)
    {
        base.OnElementChanged(e);

        if (this.Control == null)
        {
            var webView = new global::Android.Webkit.WebView(this.Context);
            webView.SetWebChromeClient(new WebChromeClient());
            webView.Settings.JavaScriptEnabled = true;
            webView.Settings.SetPluginState(WebSettings.PluginState.On);
            this.SetNativeControl(webView);
        }
    }    
}
}

So can anyone tell me what is wrong ? 所以有人能告诉我什么是错的吗?

Thanks in advance. 提前致谢。

Try to replace the sample HTML as below with some fixes. 尝试使用一些修复替换下面的示例HTML。 Not sure if this is the root cause. 不确定这是否是根本原因。

<!DOCTYPE html>
<html>
<body>
    <video src="http://www.myserver.com/video1.mp4" controls height="150" width="150">
</body>
</html>

I made the adjustments for two things: 我做了两件事的调整:

  • The DOCTYPE DOCTYPE
  • Adding "http://" at the beginning of the URL 在URL的开头添加“http://”

Also, you may refer to this blog post (Making HTML5 Video work on Android phones) for further HTML tips and tricks on making video work. 此外,您可以参考此博客文章(在Android手机上制作HTML5视频),以获取有关制作视频的更多HTML提示和技巧。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM