HTML5 video 類似app上的觸控

html5 video tag player javascript

king742171 2017-08-31 13:45:44 ‧ 7300 瀏覽

分享至

我想在網頁上作出如下圖的功能

部分手機app的影片都會有類似功能

我想使用html5的video標籤製作影片撥放
當在桌機browser上呈現的控制就跟一般常見的player一樣
當同一個網頁在平板或是手機裝置上時
我想要多出類似上圖那樣的控制
也就是滑動影片可以快進或快退

目前是簡單做了個以下程式

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 Video Test</title>
    </head>
    <body>
        <div id="wrapper" style="position: relative">
            <div id="video-block">
                <video src="test.mp4" controls="controls" />
            </div>
            <div id="touch-block" style="width: 75px; height: 75px; background-color: green; position: absolute; top: 10px; left: 10px">
                &amp;nbsp;
            </div>
        </div>
        <script type="text/javascript">
            (function() {
                var touchblock = document.getElementById("touch-block");
                touchblock.onclick = function(e) {
                    var el = e.target;
                    el.style.backgroundColor = "blue";
                    window.setTimeout(function() {
                        el.style.backgroundColor = "green";
                    }, 750);
                };
            })();
        </script>
    </body>
</html>

想說在video上做個透明的區塊當作控制項
(現在設定顏色只是確定可以運作)
不過..我想有個如上圖拖曳的功能來讓影片快進或快退

求提供參考資料或指導
另外...video標籤會不會其實有屬性或子標籤可以實現我要的功能呢?