I wanted to use Fluid PLayer in my HTML site on multiple videos. But I must be doing something wrong because only first one is playing in Fluid Player. I think that there is something wrong in giving all tags same id but i'm not sure. Any help?
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href=".min.css" type="text/css"/>
<script src=".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>I wanted to use Fluid PLayer in my HTML site on multiple videos. But I must be doing something wrong because only first one is playing in Fluid Player. I think that there is something wrong in giving all tags same id but i'm not sure. Any help?
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="https://cdn.fluidplayer./v2/current/fluidplayer.min.css" type="text/css"/>
<script src="https://cdn.fluidplayer./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>- Yes, there is something wrong in giving all tags same id. – Mr Lister Commented Dec 23, 2018 at 21:57
3 Answers
Reset to default 1
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="https://cdn.fluidplayer./v2/current/fluidplayer.min.css" type="text/css"/>
<script src="https://cdn.fluidplayer./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>You are providing the same id 'short' for all the 3 video tags and invoking single fluidplayer instance
providing modification to the code
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="https://cdn.fluidplayer./v2/current/fluidplayer.min.css" type="text/css"/>
<script src="https://cdn.fluidplayer./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>
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="https://cdn.fluidplayer./v2/current/fluidplayer.min.css" type="text/css"/>
<script src="https://cdn.fluidplayer./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>