在flutter web上渲染多个Youtube视频

ecfsfe2w  于 2023-11-21  发布在  Flutter
关注(0)|答案(1)|浏览(120)

我已经开始建立网站,但使用flutter.我能够achive在页面上呈现单个YT视频.但当我尝试这样做多个视频它没有得到显示.经调查得知,只有1嵌入视频已绑定到DOM解析器.下面是我的示例代码. Where assets[pageIndex]是我传递的链接.和Iframe负责显示它.请帮助我在这里,让我知道如果需要什么.提前感谢.排灯节快乐:)
我尝试了不同的方式,我保持2不同的视频链接在2 seprate小部件,但仍然只有一个视频渲染。

import 'dart:html';
                import 'dart:ui_web' as ui;
                import 'package:flutter/material.dart';

                class IframeScreen extends StatefulWidget {
                  final List<String> urlDataList;

                  IframeScreen(this.urlDataList, {Key? key}) : super(key: key);

                  @override
                  State<IframeScreen> createState() => _IframeScreenState();
                }

                class _IframeScreenState extends State<IframeScreen> {
                  late List<IFrameElement> _iframeElements;

                  @override
                  void initState() {
                    super.initState();

                    _iframeElements = List.generate(
                      widget.urlDataList.length,
                      (index) {
                        var iframeElement = IFrameElement()
                    ..src = widget.urlDataList[index]
                    ..style.border = 'none'
                    ..allowFullscreen = true;

                        // Enable JavaScript
                        iframeElement.attributes['allow'] =
                      'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';

                        // Register the iframe element with a unique key using index
                        ui.platformViewRegistry.registerViewFactory(
                    'iframeElement$index',
                    (int viewId) => iframeElement,
                        );

                        print('Registered iframeElement$index: ${iframeElement.src}');

                        return iframeElement;
                      },
                    );
                  }

                  @override
                  Widget build(BuildContext context) {
                    return Column(
                      children: [
                        for (int index = 0; index < widget.urlDataList.length; index++)
                    Expanded(
                      child: Container(
                        child: HtmlElementView(
                          viewType: 'iframeElement$index',
                          key: UniqueKey(),
                        ),
                      ),
                    ),
                      ],
                    );
                  }
                }

                class YourWidget extends StatelessWidget {
                  final List<String> assets;
                  final List<String> title;

                  YourWidget({required this.assets, required this.title});

                  @override
                  Widget build(BuildContext context) {
                    var screenSize = MediaQuery.of(context).size;

                    return Scaffold(
                      body: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                    ...Iterable<int>.generate(assets.length).map(
                      (int pageIndex) => Column(
                        children: [
                          SizedBox(
                            height: screenSize.width / 6,
                            width: screenSize.width / 3.8,
                            child: InkWell(
                        onTap: () {
                          print(pageIndex);
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20.0),
                            boxShadow: [
                              BoxShadow(
                                offset: Offset(0, 10),
                                blurRadius: 20,
                                spreadRadius: 5,
                                color: Colors.grey.withOpacity(0.3),
                              )
                            ],
                          ),
                          child: IframeScreen([assets[pageIndex]]),
                        ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(
                        top: screenSize.height / 70,
                            ),
                            child: Text(
                        title[pageIndex],
                        style: TextStyle(
                          fontSize: 20,
                          color: Colors.orangeAccent,
                          fontFamily: 'Montserrat',
                          fontWeight: FontWeight.w500,
                        ),
                            ),
                          ),
                        ],
                      ),
                    ),
                        ],
                      ),
                    );
                  }
                }

                void main() {
                  runApp(
                    MaterialApp(
                      home: YourWidget(
                        assets: ['your_video_url_1', 'your_video_url_2'],
                        title: ['Title 1', 'Title 2'],
                      ),
                    ),
                  );
                }

字符串

ippsafx7

ippsafx71#

这里是修复:需要为每个视频传递唯一的viewType,更新了IframeScreen代码:

import 'dart:html';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class IframeScreen extends StatefulWidget {
  var urlData;

  IframeScreen(this.urlData, {Key? key}) : super(key: key);

  @override
  State<IframeScreen> createState() => _IframeScreenState();
}

class _IframeScreenState extends State<IframeScreen> {
  final IFrameElement _iFrameElement = IFrameElement();

  @override
  void initState() {
    _iFrameElement.src = widget.urlData;
    _iFrameElement.style.border = 'none';
    _iFrameElement.allowFullscreen = true;
// ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      widget.urlData,
      (int viewId) => (_iFrameElement as IFrameElement),
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: HtmlElementView(
          key: UniqueKey(),
          viewType: widget.urlData,
        ),
      ),
    );
  }
}

字符串

相关问题