Flatter WebView插件无法播放某些YouTube视频_Webview_Flutter_Youtube_Youtube Iframe Api

Flatter WebView插件无法播放某些YouTube视频

webview flutter youtube

Flatter WebView插件无法播放某些YouTube视频,webview,flutter,youtube,youtube-iframe-api,Webview,Flutter,Youtube,Youtube Iframe Api,webview_flatter插件无法播放某些YouTube嵌入视频，如果从web应用程序中播放这些视频，这些视频就可以正常工作。视频显示“视频不可用”。在Flitter应用程序中在线播放YouTube视频已经成为一个问题至少有一年了我尝试了各种Flitter插件来在线播放YouTube视频，但它们要么只支持Android，要么不支持YouTube 我曾尝试直接在WebView插件中使用HTML字符串（YouTube iframe），但视频不可用。通过从Web服务器加载HTML，可以播放一些

webview_flatter插件无法播放某些YouTube嵌入视频，如果从web应用程序中播放这些视频，这些视频就可以正常工作。视频显示“视频不可用”。在Flitter应用程序中在线播放YouTube视频已经成为一个问题至少有一年了

我尝试了各种Flitter插件来在线播放YouTube视频，但它们要么只支持Android，要么不支持YouTube

我曾尝试直接在WebView插件中使用HTML字符串（YouTube iframe），但视频不可用。通过从Web服务器加载HTML，可以播放一些视频，这些视频在其他情况下无法直接在颤振应用程序中播放，例如，一些音乐视频显示“视频不可用。此视频包含来自Vevo的内容，Vevo已阻止其在网站或应用程序上显示”

但是，如果我使用YouTube iframe API（参见代码）从web应用程序启动相同的视频，它可以正常工作，没有任何错误，即嵌入未被禁用，但这些视频不会在Flatter应用程序中播放。我也读过类似的关于在安卓系统中播放YouTube视频的问题，建议使用WebChromeClient，这在Flitter中是不可用的

在WebView插件中显示YouTube视频的Flitter应用程序

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

// Use IP instead of localhost to access local webserver
const _youTubeUrl = 'http://localhost:8080';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YouTube Video',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'YouTube Video'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: WebView(
              initialUrl: '$_youTubeUrl/videos/IyFZznAk69U',
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (WebViewController controller) =>
                  _controller = controller,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: () async {
          await _controller.evaluateJavascript('player.loadVideoById("d_m5csmrf7I")');
        },
      ),
    );
  }
}

index.html文件，该文件使用为颤振应用程序提供的YouTube iframe API

<!DOCTYPE html>
<html>

<head>
    <style>
        #player {
            position: relative;
            padding-top: 56.25%;
            min-width: 240px;
            height: 0;
        }

        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        var player;

        function onYouTubeIframeAPIReady() {
            player = new YT.Player("yt", {
                videoId: "IyFZznAk69U",
                playerVars: {
                    autoplay: 1
                }
            });
        }
    </script>
    <script src="https://www.youtube.com/iframe_api" async></script>
</head>

<body>
    <div id="player">
        <div id="yt"></div>
    </div>
</body>

</html>


#玩家{
位置：相对位置；
垫面：56.25%；
最小宽度：240px；
身高：0；
}
iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（“YT”{
videoId:“IyFZznAk69U”，
playerVars：{
自动播放：1
}
});
}

更新：这个插件看起来更好（在jira发布的url上提到），但不是颤振团队的官方插件

您可以使用我的插件在网络视图中播放youtube视频

youtube视频id的完整示例：

导入'dart:async'；
进口“包装：颤振/材料.省道”；
导入“包：flatter_inappwebview/flatter_inappwebview.dart”；
Future main（）异步{
runApp（新的MyApp（））；
}
类MyApp扩展了StatefulWidget{
@凌驾
_MyAppState createState（）=>new_MyAppState（）；
}
类MyAppState扩展了状态{
@凌驾
void initState（）{
super.initState（）；
}
@凌驾
无效处置（）{
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主页：InAppWebViewPage（）
);
}
}
类InAppWebViewPage扩展了StatefulWidget{
@凌驾
_InAppWebViewPageState createState（）=>新建；
}
类_InAppWebViewPageState扩展状态{
inappwebview控制器webView；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“InAppWebView”）
),
主体：容器(
子项：列（子项：[
扩大(
子：容器(
子：InAppWebView(
初始URL:“https://www.youtube.com/embed/IyFZznAk69U",
initialHeaders:{}，
initialOptions:InAppWebViewWidgetOptions(
inappwebview选项：inappwebview选项(
debuggingEnabled:true，
),
),
onWebViewCreated:（InAppWebViewController）{
网络视图=控制器；
},
onLoadStart:（InAppWebViewController控制器，字符串url）{
},
onLoadStop:（InAppWebViewController控制器，字符串url）{
},
),
),
),
]))
);
}
}

这在ios上不起作用。youtube和vimeo的视频在加载时都被卡住了。链接是否需要消毒或类似的角度？这是一个混乱的马车

<!DOCTYPE html>
<html>

<head>
    <style>
        #player {
            position: relative;
            padding-top: 56.25%;
            min-width: 240px;
            height: 0;
        }

        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        var player;

        function onYouTubeIframeAPIReady() {
            player = new YT.Player("yt", {
                videoId: "IyFZznAk69U",
                playerVars: {
                    autoplay: 1
                }
            });
        }
    </script>
    <script src="https://www.youtube.com/iframe_api" async></script>
</head>

<body>
    <div id="player">
        <div id="yt"></div>
    </div>
</body>

</html>