如何使用相同的功能在一个网页上运行多个视频？

问题描述

我有一个网页，我想在上面放几个教学视频按钮。我想调用相同的脚本，但根据单击的按钮播放正确的视频。

我现在有一个按钮可以播放一个视频。这是按钮的代码：

 <p class="video-container">
   <div class="container text-center">               
       <button type="button" class="play-trigger btn-link " qdata-toggle="modal" data-target="#modal-video" ><i class="fab fa-youtube" ></i> Watch the video</button>
   </div><!--//container-->
 </p>

这是点击按钮时运行视频的脚本：

<!-- Video Modal -->
<div class="modal modal-video" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="videoModalLabel" class="modal-title sr-only">Video Tour</h4>
            </div>
            <div class="modal-body">
                <video width="680" height="660" controls id='pplayer'>
                    <source src="{{asset('assets/images/howto/comps.mov')}}" type="video/mp4">
                </video>
            </div><!--//modal-body-->
        </div><!--//modal-content-->
    </div><!--//modal-dialog-->
</div><!--//modal-->

我想再添加几个按钮。每个按钮将播放不同的视频，video1，...videox。我更愿意对视频名称列表进行硬编码，例如 var myvids = ["/mov_abc.mp4","/mov_xyz"];，并让脚本根据按下的按钮设置视频名称。

解决方法

看看这是否有助于您获得一些关于工作设置的想法...

首先添加几个这样的按钮：

<p class="video-container">
<div class="container text-center">             
<button type="button" id="btn_01" onClick="do_vidBtnClick( 1 )"> Watch the video #1 </button>
<button type="button" id="btn_02" onClick="do_vidBtnClick( 2 )"> Watch the video #2 </button>
<button type="button" id="btn_03" onClick="do_vidBtnClick( 3 )"> Watch the video #3 </button>
</div> <!--//container-->
</p>

然后添加这个Javascript代码：

<script>

myVideoList = []; //# make array hold the multiple video URLs

myVideoList[0]="assets/images/howto/comps.mov";     //# add video 1 
myVideoList[1]="assets/images/howto/somefile.mp4";  //# add video 2
myVideoList[2]="assets/images/howto/nextfile.mp4";  //# add video 3

var myFileName = "";
var myPlayer = document.getElementById("pplayer");

//# Update "myFileName" using the input number set by: onClick="do_vidBtnClick( myNumForInput )" ...
function do_vidBtnClick ( inputNum )
{
    //# is "inputNum-1" since first item in array "myVideoList" is at pos zero
    myFileName = "{{asset('" + (myVideoList[ inputNum-1 ]) + "')}}";
    myPlayer.src = myFileName; 
    myPlayer.load(); myPlayer.play();
}

</script>

感谢 VC.One 让我走上正确的道路。这是一个对我有用的解决方案。

<body

<!--- video 1 code here.  button id,video id vidBtnClick all "1" -->
<p class="video-container">
<div class="container text-center">      
<button id='btn_01' type="button" onclick="do_vidBtnClick(1)">Play Video1 </button>
<video id="myvid1" width="420" type="video/mp4">Your browser does not support HTML5 video.</video>
</div><!--//container--> 
</p> 

<!--- video 2 code here. button id,video id vidBtnClick all "2"-->
<p class="video-container">
<div class="container text-center">      
<button id='btn_02' type="button" onclick="do_vidBtnClick(2)">Play Video2 </button>
<video id="myvid2" width="420" type="video/mp4">Your browser does not support HTML5 video.</video>
</div><!--//container--> 
</p> 

<!-- add as many buttons as you need. I used 7 so I have a list of 7 videos in script array ->

 <script>

    // make array for all vids,can be any names. Im using ',' as separator
    var str='video1.mov,video2.mov,video3.mov,video4.mov,video5.mov,video6.mov,video7.mov';
    var myVideoList = str.split(','); //split string on comma space
    //  console.log( myVideoList );
    
    function do_vidBtnClick ( inputNum )
    {
    var inum = inputNum
    var myVid=myVideoList[ inum-1 ];
    myFileName="/assets/images/howto/"+ myVid
    var myDId="myvid"+inum;
    // set up video,remove autoplay,set controls on,load
    myVideo = document.getElementById(myDId);
    myVideo.removeAttribute('autoplay');
    myVideo.src = myFileName;
    myVideo.controls = true;
    myVideo.load();
    }

</script>
       
</body>

html5-video javascript video video