6 видео в синхронизации Html5

Question

6 видео в синхронизации Html5

0

Я пытаюсь создать страницу, на которой отображается только одно видео, и когда мы нажимаем кнопку, видео меняется на другое, но все нужно синхронизировать, потому что у видео1 есть звук, а другие должны синхронизироваться, чтобы иметь смысл,

Вот то, что я получил, я действительно очень сожалею о гигантском коде:

<html>
<head>
<meta charset="utf-8">
<title></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
$(document).ready(function(){
    $(".video2").hide();
    $(".video3").hide();
    $(".video4").hide();
    $(".video5").hide();
    $(".video6").hide();

    var vid1 = document.getElementById("video1");
    var vid2 = document.getElementById("video2");
    var vid3 = document.getElementById("video3");
    var vid4 = document.getElementById("video4");
    var vid5 = document.getElementById("video5");
    var vid6 = document.getElementById("video6");


    if(
    $(".button1").click(function(){
        $(".video1").show();
        $(".video2").hide();
        $(".video3").hide();
        $(".video4").hide();
        $(".video5").hide();
        $(".video6").hide();    
    }
    ));

    if(
    $(".button2").click(function(){
        $(".video1").hide();
        $(".video2").show();
        $(".video3").hide();
        $(".video4").hide();
        $(".video5").hide();
        $(".video6").hide();    
    }
    ));

    if(
    $(".button3").click(function(){
        $(".video1").hide();
        $(".video2").hide();
        $(".video3").show();
        $(".video4").hide();
        $(".video5").hide();
        $(".video6").hide();    
    }
    ));

    if(
    $(".button4").click(function(){
        $(".video1").hide();
        $(".video2").hide();
        $(".video3").hide();
        $(".video4").show();
        $(".video5").hide();
        $(".video6").hide();    
    }
    ));

    if(
    $(".button5").click(function(){
        $(".video1").hide();
        $(".video2").hide();
        $(".video3").hide();
        $(".video4").hide();
        $(".video5").show();
        $(".video6").hide();    
    }
    ));

    if(
    $(".button6").click(function(){
        $(".video1").hide();
        $(".video2").hide();
        $(".video3").hide();
        $(".video4").hide();
        $(".video5").hide();
        $(".video6").show();    
    }
    ));

});
</script>

</head>

<body>

<div class="video1">
    <video id="video1" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely1.mp4" type="video/mp4">
    </video>
</div>

<div class="video2">
    <video id="video2" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely2.mp4" type="video/mp4">
    </video>
</div>

<div class="video3">
    <video id="video3" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely3.mp4" type="video/mp4">
    </video>
</div>

<div class="video4">
    <video id="video4" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely4.mp4" type="video/mp4">
    </video>
</div>

<div class="video5">
    <video id="video5" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely5.mp4" type="video/mp4">
    </video>
</div>

<div class="video6">
    <video id="video6" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely6.mp4" type="video/mp4">
    </video>
</div>

</div>
<div class="button1">
<button>Camera 1</button>
</div>
<div class="button2">
<button>Camera 2</button>
</div>

<div class="button3">
<button>Camera 3</button>
</div>

<div class="button4">
<button>Camera 4</button>
</div>

<div class="button5">
<button>Camera 5</button>
</div>

<div class="button6">
<button>Camera 6</button>
</div>

</div>

</body>
</html>

Fealaure 17 дек. 2013, в 22:28

Источник

0

А какая у вас проблема?
Jasper 17 дек. 2013, в 21:18
0

Что их синхронизирует? Просто играть на экране должно играть все сразу?
fauverism 17 дек. 2013, в 21:19
0

Ничто не синхронизирует их. Мне нужно сделать что-то для синхронизации = (
Fealaure 07 янв. 2014, в 16:29

Показать ещё 1 комментарий

Теги:

javascript

jquery

html5

2 ответа

0

Вы можете использовать код синхронизации, который я использовал. Существенная часть

if (Math.abs(other.currentTime - first.currentTime) > maxDrift) {
      // sync all times of videos to first
      other.currentTime = first.currentTime;
}

Хотя этот подход работает в некоторых случаях, есть некоторые проблемы. Браузеры синхронизируются на ключевых кадрах, которые вы должны убедиться в видео. Также более низкие частоты кадров (fps <10) имеют тенденцию быть очень плохой.

SiggyF 08 фев. 2017, в 19:45

Ещё вопросы

Что их синхронизирует? Просто играть на экране должно играть все сразу?
Ничто не синхронизирует их. Мне нужно сделать что-то для синхронизации = (

Kyle Shay · Accepted Answer · 2013-12-17T19-55-00.000Z

Я взломал прототип рабочего скрипка; определенно не самый эффективный, он может быть, но он работает. http://jsfiddle.net/3BmDx/

В основном, способ, которым он работает, заключается в том, что javascript будет обрабатывать клики и будет воспроизводить все видео, а не использовать тег "autoplay". Вы можете захотеть просмотреть предварительную загрузку видео до запуска этого .play() для них. Что-то вроде:

    var videos = 6;
    var loaded = 0;
    $(video).on("load", function() {
        loaded++;
        if(loaded==videos) {
            // all videos have been loaded on the page, now .play() them
        }
    }

jQuery удобен, потому что если вы хотите применить .hide() ко всем элементам видео на странице сразу, вы можете просто использовать $('video').hide() и jQuery будут соответствовать всем видеотегам.

Я использую это для своей выгоды в функции reset(b). функция reset(b) вызывается каждый раз, когда нажимается кнопка, и она будет снова включать все кнопки, деактивировать текущую кнопку (полезно узнать, что вы выбрали), а затем скрыть все видео на странице. После этого будет показано правильное видео.

   $(document).ready(function(){
        // hide all of the video tags
        $("video").hide();
        $("button").removeAttr("disabled");

        $.each($("video"), function(i,e) {
            $(e)[0].play();
        });

        function reset(b) {     
            $("button").removeAttr("disabled");
            $(b).attr("disabled", "disabled");
            $("video").hide();   
        }

        // handle button click for video to show
        $("#button1").click(function() {  
            reset($(this));
            $("#video1").show();
        });  
        $("#button2").click(function() {     
            reset($(this));
            $("#video2").show();
        });  
        $("#button3").click(function() {  
            reset($(this));
            $("#video3").show();
        });  
        $("#button4").click(function() {  
            reset($(this));
            $("#video4").show();
        });  
        $("#button5").click(function() {  
            reset($(this));
            $("#video5").show();
        });  
        $("#button6").click(function() { 
            reset($(this));
            $("#video6").show();
        });    
    });