如何在 webview 中使用 iframe 播放 vimeo 视频？答案

【问题标题】：how to play vimeo video using iframe in webview?如何在 webview 中使用 iframe 播放 vimeo 视频？
【发布时间】：2013-03-31 11:58:57
【问题描述】：

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView wv=(WebView)findViewById(R.id.webView1);

        wv.getSettings().setJavaScriptEnabled(true);
        wv.getSettings().setAppCacheEnabled(true);
        wv.getSettings().setDomStorageEnabled(true);

        // how plugin is enabled change in API 8
        if (Build.VERSION.SDK_INT < 8) {
          wv.getSettings().setPluginsEnabled(true);
        } else {
          wv.getSettings().setPluginState(PluginState.ON);
        }
        String venkat="<iframe src=\"http://player.vimeo.com/video/27244727?portrait=0&color=333\" width=\"WIDTH\" height=\"HEIGHT\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>";
        wv.loadData(venkat,"text/html","UTF-8");
    }
}

从谷歌研究后，我写了上面的代码，但没有工作。在此没有发生错误，但是当我单击播放按钮时，进度条会显示一段时间，然后消失并再次显示播放按钮...有人可以建议我如何解决这个问题吗？

【问题讨论】：

标签： android iframe android-webview vimeo

【解决方案1】：

这样做：

<iframe src="//player.vimeo.com/video/VIDEO_ID" 
        width="515" 
        height="340" 
        frameborder="0" 
        webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

【讨论】：

如何开启自动播放

【解决方案2】：

您必须在 andorid manifest 中启用硬件加速功能。要在所有设备上播放 vimeo 视频，bec vimeo 视频是 html5 类型的视频。

还有here is link of vimeo video play，它运行良好。

【讨论】：

【解决方案3】：

const TheVideo = (props) => {
 const getVimeoUrl = (uri: string): string => {
        const value = uri.split("/");
        return value[value.length - 1];
    };
    enter code here

return (<>
 <iframe
                        src={
                            props.specificVideo?.url
                                ?.split("/")[2]
                                .startsWith("vimeo")
                                ? `https://player.vimeo.com/video/${getVimeoUrl(
                                      props.specificVideo?.url
                                  )}`
                                : props.specificVideo?.url ?? ""
                        }
                        width="{video_width}"
                        height="{video_height}"
                        frameBorder="0"
                        title={props.specificVideo?.title ?? ""}
                        className="specvideoview-frame"
                    ></iframe>
</>)
}

【讨论】：

【解决方案4】：

webView = (WebView)findViewById(R.id.presentation_webview);

        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setAllowFileAccess(true);
        webView.getSettings().setPluginsEnabled(true);
        webView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY); 

        DisplayMetrics displaymetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        int height = displaymetrics.heightPixels;
        int wwidth = displaymetrics.widthPixels;

        Log.e("h & w",wwidth+"-"+height);

        String data_html = "<!DOCTYPE HTML> <html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:og=\"http://opengraphprotocol.org/schema/\" xmlns:fb=\"http://www.facebook.com/2008/fbml\"> <head></head> <body style=\"margin:0 0 0 0; padding:0 0 0 0;\"> <iframe width='"+wwidth+"' height='"+height+"' src=\"http://player.vimeo.com/video/"+VIDEO_ID+"\" frameborder=\"0\"></iframe> </body> </html> ";

        webView.setWebViewClient(new MyWebViewClient());

        webView.loadDataWithBaseURL("http://vimeo.com", data_html, "text/html", "UTF-8", null);

试试上面的代码，用设备的宽高来播放视频。

【讨论】：