如何在一个画布中控制许多视频

时间:2016-08-22 12:30:26

标签: javascript html html5

我一直在寻找解决方案,但直到现在我还没有解决方案

我在画布上有很多视频...如果另一个人开始播放,我需要暂停播放视频?????

感谢您的回答 这是我的代码以获得更多解释...

HTML

     private Dictionary<string, string> fileDictionary = new Dictionary<string, string>(); 

    private void load_Click(object sender, RoutedEventArgs e)
    {
        Microsoft.Win32.OpenFileDialog ofd = new Microsoft.Win32.OpenFileDialog();
        ofd.DefaultExt = ".mp3";
        ofd.Filter = "All|*.*";
        ofd.Multiselect = true;
        Nullable<bool> result = ofd.ShowDialog();
        if (result == true)
        {

            for (int i = 0; i < ofd.FileNames.Length; i++)
            {
                var filePath = ofd.FileNames[i];
                var fileName = System.IO.Path.GetFileName(filePath);
                fileDictionary.Add(fileName, filePath);
                // not sure about this logic. You may need to reconsider what you are trying to do here.
                //Instead of doing this, create a click event for the list box and get the selected file path to be played from the dictionary.
                listbox4.Items.Add(fileName);                  
            }
        }
    }

 private void listbox4_SelectionChanged(object sender, SelectionChangedEventArgs e) 
 { 
    if (listbox4.SelectedItem != null) 
    { 
        var selectedFile = listbox4.SelectedItem.ToString();
        string selectedFilePath;
        fileDictionary.TryGetValue(selectedFile, out selectedFilePath);
        if (!string.IsNullOrEmpty(selectedFilePath))
        {
            mePlayer.Source = new Uri(selectedFilePath, UriKind.RelativeOrAbsolute);
            mePlayer.LoadedBehavior = MediaState.Play;
        }
    } 
 }

CSS

    <div class="cont">
        <canvas id="myCan"  class="cont"></canvas>
        <div class="mainVidCont">

            <video id="vid1" class="myVid" accesskey="1" controls >
                <source src="video9.mp4" type="video/mp4"/>
            </video>
            <video id="vid2" class="myVid" accesskey="2" controls  >
                <source src="video6.mp4" type="video/mp4"/>
            </video>
            <video id="vid3" class="myVid" accesskey="3" controls  >
                <source src="video23.mp4" type="video/mp4"/>
            </video>

            <video id="vid4" class="myVid" accesskey="4" controls  >
                <source src="video24.mp4" type="video/mp4"/>
            </video>
            <video id="vid5" class="myVid" accesskey="5" controls  >
                <source src="Adele - Send My Love To Your New Lover.mp4" type="video/mp4"/>
            </video>
            <video id="vid6" class="myVid" accesskey="6" controls  >
                <source src="video11.mp4" type="video/mp4"/>
            </video>

        </div>
    </div>

的javascript

.cont{
            position:absolute;
            width:100%;
            height:100%;
            bottom:0;
            right:0;
            top:0;
            left:0;
         }
         mayCan
         {
         opacity:1;
         }
         .myVid
         {
          position:relative;

            width:200px;
            height:auto;
            margin:5px;
        }
         .mainVidCont
         {
            position:fixed;
            width:250px;
            overflow-y:auto;
            right:0;
            bottom:0;
            top:0;
            left:0;
         }

1 个答案:

答案 0 :(得分:1)

<script>
window.onload=function(){
videos=document.getElementsByTagName("video");
videos.forEach(function(video){
video.onplay=function(){
videos.forEach(function(avideo){
avideo.stop();
});
video.play();
};
});
};
</script>

这将循环播放所有视频,并为视频添加一个事件监视器,在单击时停止所有其他视频。