Fox*_*nut 5 youtube-iframe-api flutter youtube-player-flutter
我一直在我的网络项目中使用youtube_player_iframe包,并一直在尝试理解和修复以下问题:
Height of Platform View type: [youtube-0] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [youtube-0] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.
Run Code Online (Sandbox Code Playgroud)
一切似乎都按原样工作正常,但看到这条消息出现却很麻烦。这么说,我确实想确定并解决根本原因。在 Flutter 2.5 版本中,平台处理调整大小和定位视图的方式发生了变化。可以在此处找到更改的文档和迁移指南。不过,即使有指南,我似乎也缺乏利用它的能力。
以下是 Flutter 页面的迁移代码:
ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
final html.Element htmlElement = html.DivElement()
// ..other props
..style.width = '100%'
..style.height = '100%';
// ...
return htmlElement;
});
Run Code Online (Sandbox Code Playgroud)
我将提供一些代码片段,但如果您有什么特别想看的内容,请询问。
自定义YouTubePlayer类(StatefulWidget)
// YoutubePlayerController - Instantiated in initState();
late YoutubePlayerController _youtubePlayerController;
// Marks the currently played video
String currentVideo = "";
@override
void initState() {
super.initState();
youtubePlayerInit();
}
@override
void dispose() {
super.dispose();
// Close the YouTube Player
_youtubePlayerController.close();
// Cancel the subscription to the stream
_streamSubscription.cancel();
}
// Instantiate the YoutubePlayerController controller
youtubePlayerInit() {
_youtubePlayerController = YoutubePlayerController(
params: const YoutubePlayerParams(
showControls: true,
mute: false,
showFullscreenButton: true,
loop: false,
strictRelatedVideos: true,
),
)..listen((event) {
playerState = event.playerState;
if (event.hasError) {
widget.updateParent(false, event.error.toString());
}
});
}
Run Code Online (Sandbox Code Playgroud)
我如何加载视频的示例(我也有暂停和恢复)
// Loads the video by Url, and records the Url as the "Current" video
void loadVideo(String url) {
_youtubePlayerController.loadVideo(url);
currentVideo = url;
}
Run Code Online (Sandbox Code Playgroud)
构建播放器
@override
Widget build(BuildContext context) {
return kIsWeb
? YoutubePlayerScaffold(
controller: _youtubePlayerController,
builder: (context, player) {
return player;
},
)
// ToDo - Implement Mobile Support
: Container();
}
Run Code Online (Sandbox Code Playgroud)
任何帮助将不胜感激。先感谢您!
编辑:我尝试使用 YoutubePlayerController.setSize(width, height) 方法。我注意到它是 Future<void> 的函数。知道这一点后,我认为我没有异步设置大小可能是我的错误。我尝试了下面的方法,其中将构建一个空容器来代替 YoutubePlayerScaffold,直到我的 playerSizeSet 布尔值为 true。然而,该函数从未返回......只是超时。
Future<void> setSize() async {
await _youtubePlayerController.setSize(480, 270).then((_) {
setState(() {
playerSizeSet = true;
return;
});
}).onError((error, stackTrace) {
print("error");
return;
}).whenComplete(() {
print("complete");
return;
}).timeout(const Duration(seconds: 1), onTimeout: () {
print("timed out");
return;
});
}
Run Code Online (Sandbox Code Playgroud)
想知道接下来要尝试什么吗?
| 归档时间: |
|
| 查看次数: |
1098 次 |
| 最近记录: |