Question

我正在使用找到的here代码，我已经将其删除了一些以摆脱音量按钮等。我想要做的是每个自动播放大约有8个视频，循环，并有按钮来改变播放的速度。如何修改此代码以使其适用于任意数量的视频元素，是否为init（）函数提供了多个变量？

[Key: Value]

Answer 1

有很多方法可以实现，但由于你希望它适用于任意数量的视频，我会将标记的创建和控件绑定到一个接受视频网址作为参数的函数中，像这样：

<html>
  <head>
    <title>Full player example</title>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. -->    
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->

    <script type="text/javascript">
        window.videos = 0;
        function createVideo (src) {
            var container = document.createElement('div'),
                    video = document.createElement('video'),
                    buttonContainer = document.createElement('div'),
                    faster = document.createElement('button'),
                    forward = document.createElement('button'),
                    normal = document.createElement('button'),
                    playPause = document.createElement('button'),
                    restart = document.createElement('button'),
                    rewind = document.createElement('button'),
                    slower = document.createElement('button'),
                    error = document.createElement('div'),
                    showError = function (message) {
                        error.textContent = message;
                        setTimeout(function () {
                            error.textContent = '';
                        }, 5000);
                    };

            ++window.videos;

            document.body.appendChild(container);
            container.id = 'container-' + window.videos;

            container.appendChild(video);
            video.id = 'video-' + window.videos;
            video.autoplay = true;
            video.controls = true;
            video.loop = true;
            video.src = src;
            video.load();

            video.addEventListener('error', function (err) {
                showError(err);
            }, true);

            container.appendChild(buttonContainer);
            buttonContainer.id = 'buttonContainer-' + window.videos;

            buttonContainer.appendChild(restart);
            buttonContainer.appendChild(slower);
            buttonContainer.appendChild(rewind);
            buttonContainer.appendChild(playPause);
            buttonContainer.appendChild(forward);
            buttonContainer.appendChild(faster);
            buttonContainer.appendChild(normal);

            faster.id = 'faster-' + window.videos;
            faster.textContent = '+';
            faster.title = 'Faster playback button';
            faster.addEventListener('click', function () {
                video.playbackRate += .25;
            }, false);

            forward.id = 'forward-' + window.videos;
            forward.textContent = '>>';
            forward.title = 'Forward button';
            forward.addEventListener('click', function () {
                video.currentTime += 10;
            }, false);

            normal.id = 'normal-' + window.videos;
            normal.textContent = '=';
            normal.title = 'Reset playback rate button';
            normal.addEventListener('click', function () {
                video.playbackRate = 1;
            }, false);

            playPause.id = 'playPause-' + window.videos;
            playPause.textContent = '||';
            playPause.title = 'Play button';
            playPause.addEventListener('click', function (evt) {
                button = evt.target;
                if (video.paused) {
                    video.play();
                    button.textContent = '||';
                }
                else {
                    video.pause();
                    button.textContent = '>';
                }
            }, false);

            restart.id = 'restart-' + window.videos;
            restart.textContent = '[]';
            restart.title = 'Restart button';
            restart.addEventListener('click', function () {
                video.currentTime = 0;
            }, false);

            rewind.id = 'rewind-' + window.videos;
            rewind.textContent = '<<';
            rewind.title = 'Rewind button';
            rewind.addEventListener('click', function () {
                video.currentTime -= 10;
            }, false);

            slower.id = 'slower-' + window.videos;
            slower.textContent = '-';
            slower.title = 'Slower playback button';
            slower.addEventListener('click', function () {
                video.playbackRate -= .25;
            }, false);

            container.appendChild(error);
            error.id = 'error-' + window.videos;
            error.title = 'Error message area';
            error.style.color = 'red';
        };

        function init() {
            createVideo('/lib/exe/fetch.php?media=experiment_log_books:sig0700.mp4');
            createVideo('/lib/exe/fetch.php?media=experiment_log_books:sig0700.mp4');
        }
    </script>

    </head>
    <body onload="init();"></body>
</html>

带有javascript的HTML5视频 - 多个视频的自定义按钮

1 个答案: