Html - Css -Js - 控制video按鈕 - 隱藏Video控制項 /鎖住控制項 - 自動播放影片 / 鎖住影片按鈕 / 鎖住影片進度條

 Html - Css -Js - 控制video按鈕 / 隱藏Video控制項 /鎖住控制項 / 自動播放影片 / 鎖住影片按鈕 / 鎖住影片進度條 

為了強迫使用者看影片，不可以直接拉動進度條到最後

所以決定關掉進度條

這個部分踩了一身雷ＷＯＷ

因為基本的控鍵隱藏 只要Video的controls="controls"拿掉就好

原本的程式這樣會顯示播放與進度條等等

<video width="1024" height="576" id="shVideo" controls="controls">

    <source src="mp4連結" type="video/mp4" >

</video>

拿掉的這樣

<video width="1024" height="576" id="shVideo">

    <source src="mp4連結" type="video/mp4" >

</video>

就不會顯示了

But!! 偉大的Chrome可以在影片點右鍵開啟控制介面

這樣有個毛線用，只能擋掉笨的使用者（喂

於是我再加上了Css強制隱藏video的控制介面

<style type="text/css">

    video::-webkit-media-controls-timeline {

    display: none;

}

video::-webkit-media-controls {

      display: none;

}

 .auto-style1 {

    text-align: center;

    }

 </style>

這一次即使偉大如Chrome都開不起來了哈哈哈

但更可怕的事情發生了

因為沒有按鈕了，所以影片需要自動播放

然後Chrome現在禁止有聲音的影片自動播放

要就要把影片禁音...不然就是要透過紐

於是

我決定直接用Js刻暫停跟播放的按鈕...

這樣至少比較確保IE跟Chrome的狀況會是相同的

<script>

        var videoPlayer = document.getElementsByTagName("video")[0];

        function play() {

            videoPlayer.play(); // 播放

        }

        function pause() {

            videoPlayer.pause(); // 暫停

        }

  </script>

    <p >

        <div class="auto-style1" >

          <button onclick="play()">Play</button>

          <button onclick="pause()">Pause</button>       

      </div>

    </p>

為了讓按鈕置中

加個css

  .auto-style1 {

        text-align: center;

    }

最後的成果如下

要漂亮點的按鈕自己上網找CSS~~