Android webview cannot render youtube video embedded via iframe

前端未结
关注
 6  1950
This is about loading youtube videos using latest embedded format (iframe) inside a webview.
Example of the iframe embed format
</script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5408099190056760"
     data-ad-slot="7305827575"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>        </div>
                      <div class="relativetags">
              相关标签:
       </div>
      </div>
      
      <div class="fly-panel detail-box" id="flyReply">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>6条回答</legend>        </fieldset>

        <ul class="jieda" id="jieda">
                         				            <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-34.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000034.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-34.html" class="fly-link">
                  <cite>你的背包 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2020-11-30 10:40</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<blockquote>
  <p>This Code made exactly fit to different device</p>
</blockquote>

<pre><code>webView.setInitialScale(1);
    webView.setWebChromeClient(new WebChromeClient());

    webView.getSettings().setAllowFileAccess(true);
    webView.getSettings().setPluginState(WebSettings.PluginState.ON);
    webView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
    webView.setWebViewClient(new WebViewClient());
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setUseWideViewPort(true);
    DisplayMetrics displaymetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
    int height = displaymetrics.heightPixels;
    int width = displaymetrics.widthPixels;

    Log.e(SimpleBillsConstants.SIMPLE_BILLS, width + "-" + height);

    String data_html = "&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset=\"UTF-8\"&gt;&lt;meta name=\"viewport\" content=\"target-densitydpi=high-dpi\" /&gt; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt; &lt;link rel=\"stylesheet\" media=\"screen and (-webkit-device-pixel-ratio:1.5)\" href=\"hdpi.css\" /&gt;&lt;/head&gt; &lt;body style=\"background:black;margin:0 0 0 0; padding:0 0 0 0;\"&gt; &lt;iframe style=\"background:black;\" width=' "+width+"' height='"+height+"' src=\""+ VIDEO_URL+"\" frameborder=\"0\"&gt;&lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt; ";



    webView.loadDataWithBaseURL("http://vimeo.com", data_html, "text/html", "UTF-8", null);
</code></pre>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='611966'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="611966">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_611966">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="611966">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-97.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000097.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-97.html" class="fly-link">
                  <cite>天涯浪人 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2020-11-30 10:48</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>I would suggest using some code to detect the environment of the user... use the iframe code only for ios devices (iphone, ipod, ipad) and use the old code for everyone else.</p>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='611965'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="611965">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_611965">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="611965">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-53.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000053.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-53.html" class="fly-link">
                  <cite>说谎 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2020-11-30 10:49</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<blockquote>
<p><strong>HTML5 Video support</strong></p>
<p>In order to support inline HTML5 video in your application, you need to have <strong>hardware acceleration turned on</strong>, and <strong>set a WebChromeClient</strong>.</p>
</blockquote>
<p>http://developer.android.com/reference/android/webkit/WebView.html</p>
<p>(Hope it help someone)</p>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='611963'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="611963">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_611963">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="611963">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-92.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000092.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-92.html" class="fly-link">
                  <cite>遥遥无期 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2020-11-30 10:57</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>This worked for me- the code opens youtube site and can play its videos inside WebView:   </p>

<pre><code>mWebView = (WebView) findViewById(R.id.webview);     

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);


String frameVideo = "&lt;html&gt;&lt;body&gt;Youtube video .. &lt;br&gt; &lt;iframe width=\"320\" height=\"315\" src=\"https://www.youtube.com/\" frameborder=\"0\" allowfullscreen&gt;&lt;/iframe&gt;&lt;/body&gt;&lt;/html&gt;";

mWebView.loadData(frameVideo, "text/html", "utf-8");

mWebView.loadUrl("http://www.youtube.com/");

mWebView.setWebViewClient(new WebViewClient());
</code></pre>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='611964'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="611964">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_611964">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="611964">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-34.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000034.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-34.html" class="fly-link">
                  <cite>你的背包 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2020-11-30 11:02</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>If you want to play  videos within your <code>WebView</code> you NEED to load the data with a base URL!</p>

<p><strong>DONT</strong> do this:</p>

<pre><code>mContentWebView.loadDataWithBaseURL(null, webViewContentString,
            "text/html", "UTF-8", null);
</code></pre>

<p><strong>DO THIS INSTEAD</strong>:</p>

<pre><code>    //veryVeryVery important for playing the videos!
    mContentWebView.loadDataWithBaseURL(theBaseUrl, webViewConentString,
            "text/html", "UTF-8", null);
</code></pre>

<p>The Base URL will be the something like the "original" url of what you are displaying in your <code>WebView</code>. So let's say you are making a news reader, the <code>WebView's</code> base url will be the url of the original story.</p>

<p>Good Luck!</p>

<p>Also remember to set up your WebView...Like so...</p>

<pre><code>    mContentWebView.setWebChromeClient(new WebChromeClient());
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
    mContentWebView.setWebViewClient(new WebViewClient());
    mContentWebView.getSettings().setJavaScriptEnabled(true);
</code></pre>

<p>You need to have hardware acceleration turned on in the Manifest (only available on SDK 14 and above).</p>

<p>Ex. Hardware Acceleration On:</p>

<pre><code>&lt;application
    android:name="com.example.app"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:hardwareAccelerated="true"&gt;
&lt;!-- hardwareAccelerated requires SDK 14 --&gt;
...
&lt;/application&gt;
</code></pre>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='611962'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="611962">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_611962">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="611962">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-97.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000097.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-97.html" class="fly-link">
                  <cite>天涯浪人 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2020-11-30 11:03</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>Android browsers are utterly buggy what comes to video playback and embedding. It simply does not work across devices. Trying to get it working is just waste of your time. My suggestion is that you don't try to include <code>&lt;iframe&gt;</code> but simply provide a thumbnail of the video which directly links to YouTube page or h264 file.</p>

<p>Earlier discussion, with a possible solution.</p>

<p>Google Reader-esque optimizing of WebViews on Android</p>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='611961'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="611961">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_611961">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="611961">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          
           <style>
   
.laypage-main a, .laypage-main span {
    display: inline-block;
}
        </style>                  </ul>
        
        <div class="layui-form layui-form-pane">
          <form id="huidaform"  name="answerForm"  method="post">
            
            <div class="layui-form-item layui-form-text">
              <a name="comment"></a>
              <div class="layui-input-block">
            
    
<script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script>
<script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script>
<script type="text/plain" id="editor"  name="content"  style="width:100%;height:200px;"></script>                                 
<script type="text/javascript">
                                 var isueditor=1;
            var editor = UE.getEditor('editor',{
                //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
                toolbars:[['source','fullscreen',  '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']],
            
                initialContent:'',
                //关闭字数统计
                wordCount:false,
                zIndex:2,
                //关闭elementPath
                elementPathEnabled:false,
                //默认的编辑区域高度
                initialFrameHeight:250
                //更多其他参数，请参考ueditor.config.js中的配置项
                //更多其他参数，请参考ueditor.config.js中的配置项
            });
                        editor.ready(function() {
            	editor.setDisabled();
            	});
                            $("#editor").find("*").css("max-width","362px");
        </script>              </div>
            </div>
                          
    

        
         <div class="layui-form-item">
                <label for="L_vercode" class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                  <input type="text"  id="code" name="code"   value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">
                  <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode"  href="javascript:updatecode();">&nbsp;看不清?</a></span>
                </div>
              </div>
                                  <div class="layui-form-item">
                    <input type="hidden" value="158468" id="ans_qid" name="qid">
   <input type="hidden" id="tokenkey" name="tokenkey" value=''/>
                <input type="hidden" value="Android webview cannot render youtube video embedded via iframe" id="ans_title" name="title"> 
             
              <div class="layui-btn    layui-btn-disabled"  id="ajaxsubmitasnwer" >提交回复</div>
            </div>
          </form>
        </div>
      </div>
      <input type="hidden" value="158468" id="adopt_qid"	name="qid" /> 
      <input type="hidden" id="adopt_answer" value="0"	name="aid" />
    </div>
    <div class="layui-col-md4">
          
 <!-- 热门讨论问题 -->
     
 <dl class="fly-panel fly-list-one">
        <dt class="fly-panel-title">热议问题</dt>
            <!-- 本周热门讨论问题显示10条-->