HTML视频播放器(Fluid Player)可播放多个视频
HTML视频播放器(Fluid Player)可播放多个视频
提问于 2018-12-22 01:33:18
我想在我的超文本标记语言站点中使用Fluid PLayer来播放多个视频。但我一定是做错了什么，因为只有第一个是在Fluid Player中玩的。我认为给所有标签相同的id是有问题的，但我不确定。有什么帮助吗？
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>
<script src="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>
<video id="short" height="225" loop controls>
<source src="wrestling.mp4" type="video/mp4"/>
</video>
<video id="short" height="225" loop controls>
<source src="wrestling.mp4" type="video/mp4"/>
</video>
<video id="short" height="225" loop controls>
<source src="wrestling.mp4" type="video/mp4"/>
</video>
</body>
<script type="text/javascript">
var myFP = fluidPlayer(
'short',
{
layoutControls: {
fillToContainer: false,
primaryColor: false,
posterImage: false,
autoPlay: false,
playButtonShowing: true,
playPauseAnimation: true,
mute: false,
logo: {
imageUrl: null,
position: 'top left',
clickUrl: null,
opacity: 1,
mouseOverImageUrl: null,
imageMargin: '2px',
hideWithControls: false,
showOverAds: false
},
htmlOnPauseBlock: {
html: null,
height: null,
width: null
},
allowDownload: false,
allowTheatre: false,
playbackRateEnabled: false,
controlBar: {
autoHide: true,
autoHideTimeout: 1,
animated: false
},
},
vastOptions: {
}
}
);
</script>
</html>
回答 1
Stack Overflow用户
发布于 2019-09-11 19:27:44
您正在为所有3个视频标签提供相同的id 'short‘，并调用单个fluidplayer实例
提供代码修改
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>
<script src="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>
<!-- Providing unique id for each element -->
<video id="short1" height="225" loop controls>
<source src="wrestling.mp4" type="video/mp4"/>
</video>
<!-- Providing unique id for each element -->
<video id="short2" height="225" loop controls>
<source src="wrestling.mp4" type="video/mp4"/>
</video>
<!-- Providing unique id for each element -->
<video id="short3" height="225" loop controls>
<source src="wrestling.mp4" type="video/mp4"/>
</video>
</body>
<!-- INVOKING FIRST PLAYER -->
<script type="text/javascript">
var myFP = fluidPlayer(
'short1',
{
layoutControls: {
fillToContainer: false,
primaryColor: false,
posterImage: false,
autoPlay: false,
playButtonShowing: true,
playPauseAnimation: true,
mute: false,
logo: {
imageUrl: null,
position: 'top left',
clickUrl: null,
opacity: 1,
mouseOverImageUrl: null,
imageMargin: '2px',
hideWithControls: false,
showOverAds: false
},
htmlOnPauseBlock: {
html: null,
height: null,
width: null
},
allowDownload: false,
allowTheatre: false,
playbackRateEnabled: false,
controlBar: {
autoHide: true,
autoHideTimeout: 1,
animated: false
},
},
vastOptions: {
}
}
);
</script>
<!-- INVOKING SECOND PLAYER -->
<script type="text/javascript">
var myFP = fluidPlayer(
'short2',
{
layoutControls: {
fillToContainer: false,
primaryColor: false,
posterImage: false,
autoPlay: false,
playButtonShowing: true,
playPauseAnimation: true,
mute: false,
logo: {
imageUrl: null,
position: 'top left',
clickUrl: null,
opacity: 1,
mouseOverImageUrl: null,
imageMargin: '2px',
hideWithControls: false,
showOverAds: false
},
htmlOnPauseBlock: {
html: null,
height: null,
width: null
},
allowDownload: false,
allowTheatre: false,
playbackRateEnabled: false,
controlBar: {
autoHide: true,
autoHideTimeout: 1,
animated: false
},
},
vastOptions: {
}
}
);
</script>
<!-- INVOKING THIRD PLAYER -->
<script type="text/javascript">
var myFP = fluidPlayer(
'short3',
{
layoutControls: {
fillToContainer: false,
primaryColor: false,
posterImage: false,
autoPlay: false,
playButtonShowing: true,
playPauseAnimation: true,
mute: false,
logo: {
imageUrl: null,
position: 'top left',
clickUrl: null,
opacity: 1,
mouseOverImageUrl: null,
imageMargin: '2px',
hideWithControls: false,
showOverAds: false
},
htmlOnPauseBlock: {
html: null,
height: null,
width: null
},
allowDownload: false,
allowTheatre: false,
playbackRateEnabled: false,
controlBar: {
autoHide: true,
autoHideTimeout: 1,
animated: false
},
},
vastOptions: {
}
}
);
</script>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53888769
复制相关文章
相似问题
腾讯云开发者
