HTML5视频在开始播放其他视频时使用Javascript暂停

时间:2016-03-13 17:39:36

标签: javascript html5 video

我只是想知道是否有任何选项可以创建一个Javascript来暂停当您在另一个视频上播放时正在播放的视频。 我在一个页面上有大约30-40个HTML5视频标签。

我用于在网页上放置视频的代码:

function pobierz_klipy($typ) {
    $result = mysql_query("SELECT * FROM Klipy WHERE typ = $typ ORDER BY id")
            or die("Zapytanie niepoprawne");
//ilosc zwroconych wierszy
    $num_rows = mysql_num_rows($result);
    $i = 0;
    while ($i < $num_rows) {
        $id = mysql_result($result, $i, "id");
        $nazwa = mysql_result($result, $i, "nazwa");
        $nazwa_rob = mysql_result($result, $i, "nazwa_rob");
        $typ = mysql_result($result, $i, "typ");
        $sprawdzian_hq = $sciezka = "../video/data/video/" . $nazwa_rob . "_fb.mp4";

        if (file_exists($sprawdzian_hq)) {
            $sciezka = "../video/data/video/" . $nazwa_rob . "_fb.mp4";
        } else {
            $sciezka = "../video/data/video/" . $nazwa_rob . ".mp4";
        }
        if (file_exists($sprawdzian_hq)) {
            $poster = "../video/data/thumbnails/" . $nazwa_rob . "_fb.mp4.jpg";
        } else {
            $poster = "../video/data/thumbnails/" . $nazwa_rob . ".mp4.jpg";
        }


        if (file_exists($sprawdzian_hq)) {
            $hq = "../video/data/video/" . $nazwa_rob . ".mp4";
        } else {
            $hq = null;
        }
        $i = $i + 1;
        echo "<div class=\"klip\">";
        echo '<video id="' . $nazwa_rob . '" width="320" height="180" controls poster= "' . $poster . '" preload ="none">';
        echo ' <source id="source_' . $nazwa_rob . '" src="' . $sciezka . '" type="video/mp4">';
        echo 'Twoja przeglądarka nie obsługuje HTML5.';
        echo '</video>';
        echo '<br />';
        if ($hq != null) {
            echo '<button id="videolink' . $i . '" type="button" class="btn btn-danger active" style=" font-size: 10px; padding: 5px; position: absolute; bottom: 2px; left: 11px;">HQ</button>';
        }
        echo '<div class="nazwa">'.$nazwa.'</div>';
        //skrypt zmiany jakosci JS
        if (file_exists($sprawdzian_hq)) {
            echo '
            <script type = "text/javascript">
                var videobutton = document.getElementById("videolink' . $i . '");

                videobutton.addEventListener("click", function (event) {
            ';
            echo "
                    var videocontainer$i = document.getElementById('$nazwa_rob');
                    var videosource$i = document.getElementById('source_$nazwa_rob');
                    var newmp4$i = '$hq';
                    var old_mp4$i = '$sciezka';
                    var aktywne$i = 'btn btn-success active';
                    var nieaktywne$i = 'btn btn-danger active';
                    var przycikstatus$i = document.getElementById('videolink$i');
                    var obecny_klip$i = videosource$i.getAttribute('src');
                    var czas_klipu$i = videocontainer$i.currentTime;
                    console.log(czas_klipu$i);

                    if (obecny_klip$i != newmp4$i) {
                        var videosource$i = document.getElementById('source_$nazwa_rob');
                        videocontainer$i.pause();
                        videosource$i.setAttribute('src', newmp4$i);
                        videocontainer$i.load();
                        videocontainer$i.pause();
                        videocontainer$i.currentTime = czas_klipu$i;
                        przycikstatus$i.setAttribute('class', aktywne$i);
                        videocontainer$i.play();

                    } else {
                        var videosource$i = document . getElementById('source_$nazwa_rob');
                        videocontainer$i.pause();
                        videosource$i.setAttribute('src',old_mp4$i);
                        videocontainer$i.load();
                        videocontainer$i.pause();
                        videocontainer$i.currentTime = czas_klipu$i;
                        przycikstatus$i.setAttribute('class', nieaktywne$i);
                        videocontainer$i.play();

                    }


                }, false);

            </script>
            ";
        }

3 个答案:

答案 0 :(得分:1)

你也可以使用这个javascript代码。

//external.js
   video = document.getElementsByClassName("video");
        for (i = 0; i < video.length; i++) {
            video[i].onplay = function () {
                var currentIndex = index("video", this);
                for (k = 0; k < video.length; k++) {
                    if (k == currenIndex) { continue }
                    video[k].pause();
                }
            }
        }

       
        function index(className, id) {
            nodes = document.getElementsByClassName(className);
            return [].indexOf.call(nodes, id);
        }
<html>
<head>
</head>
<body>
<video class="video" src="video1.mp4" controls></video>
    <video class="video" src="video2.mp4" controls></video>
    <video class="video" src="video3.mp4" controls></video>
    <video class="video" src="video4.mp4" controls></video>
  <script src="external.js"></script>
</body>
</html>

答案 1 :(得分:0)

现在我对此代码有另一个问题:

TOP              = $(_HERE_)/..

NVVMIR_LIBRARY_DIR = $(TOP)/nvvm/libdevice

PATH            += $(TOP)/open64/bin;$(TOP)/nvvm/bin;$(_HERE_);$(TOP)/lib;

INCLUDES        +=  "-I$(TOP)/include" "-I$(TOP)/include/cudart" "-IC:/Program Files (x86)/Common Files/Microsoft/Visual C++ for Python/9.0/VC/include" "-IC:\Program Files\Microsoft SDKs\Windows\v7.1\Include"$(_SPACE_)

LIBRARIES        =+ $(_SPACE_) "/LIBPATH:$(TOP)/lib/$(_WIN_PLATFORM_)" "/LIBPATH:C:/Program Files (x86)/Common Files/Microsoft/Visual C++ for Python/9.0/VC/lib/amd64" "/LIBPATH:C:\Program Files\Microsoft SDKs\Windows\v7.1\Lib\x64"

CUDAFE_FLAGS    +=
OPENCC_FLAGS    +=
PTXAS_FLAGS     +=

我在一个页面上有大约30个视频标签。当我尝试一个接一个地播放6个视频时,第7个视频的播放无法播放。

答案 2 :(得分:0)

对不起,我没有得到通知。我使用相同的代码一个接一个播放30个视频没有问题。试着看看你是否将i值限制为7或类似的东西。 你可能只有7个标签有&#39;视频&#39;类。如果一切顺利,请尝试更换。 document.getElementsByClassName document.getElementsByTagName再次尝试。抱歉没有回复。