HTML视频播放器(Fluid Player)播放多于一个视频

时间:2018-12-21 17:33:18

标签: javascript html

我想在HTML网站的多个视频上使用Fluid PLayer。但是我肯定做错了,因为只有第一个在Fluid Player中玩。我认为为所有标签赋予相同的ID有点问题,但我不确定。有帮助吗?

Dim db As DAO.Database        
Dim rs1 As DAO.Recordset         
Dim rs2 As DAO.Recordset  

Set db = CurrentDb                              
Set rs1 = db.OpenRecordset("QC_LoopTestTable")   
Set rs2 = db.OpenRecordset("QC_LoopTestTable") 

Do Until rs1.eof
  Do Until rs2.eof
    If rs1.Fields("IMY_Up2").Value = rs2.Fields("IMY_Up1").Value Then 

    ...

    End If
    rs2.MoveNext
  Loop
rs1.MoveNext
rs2.MoveFirst
Loop

1 个答案:

答案 0 :(得分:0)

您要为所有3个视频标签提供相同的ID“短”,并调用单个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>