我已经开始建立网站,但使用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'],
),
),
);
}
字符串
1条答案
按热度按时间ippsafx71#
这里是修复:需要为每个视频传递唯一的viewType,更新了IframeScreen代码:
字符串