碼上快樂

相關內容    簡體    繁體

H5系列之video自己編寫控制欄

本文轉載自   查看原文   2019-09-09 21:13   1835    H5系列

首先來了解一下 video， video呢，是H5 的標簽，別人說的 H5播放器，沒錯 就是他了，利用video標簽，可以實現視頻播放。

但是啊，你會發現，在不同的瀏覽器上，播放器的 控制欄，都是不一樣的。例如：

 

在不同的瀏覽器上， 顯示不同的控制欄，這在公司開發，是絕對不允許出現的效果的。 所以，我們可以通過js控制video的方法，來進行自定義控制欄。

 

播放與暫停(video上面的方法，play() 和 pause())

效果圖如下：

代碼如下(有帶注釋)：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .video_player {
            position: relative;
            width: 1000px;
            height: 500px;
            margin: 0 auto;
        }

        .video_player video {
            width: 100%;
            height: 100%;
        }

        .video_player .menu {
            position: absolute;
            width: 100%;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            bottom: 0;
            left: 0;
        }

        .video_player .menu .play {
            position: absolute;
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            left: 30px;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="video_player">
        <video src="./video/mda-jgsjz4gs2ipq6d8g.mp4"></video>
        <div class="menu">
            <div class="play">播放</div>
        </div>
    </div>
    <script>var video = document.getElementsByTagName('video')[0];
        var play = document.getElementsByClassName('play')[0];

        play.onclick = function () {
            if(video.paused){  //判斷是否已經播放了，如果還沒播放，返回true 
                video.play();  //觸發方法，播放視頻
                play.innerHTML = "暫停";    //修改 文字。
            }else{
                video.pause(); //暫停播放。
                play.innerHTML = "播放";
            }
        }
    </script>
</body>

</html>

 

添加時間( duration(視頻總時長) 和 currentTime(當前播放到哪里的時間) )

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .video_player {
            position: relative;
            width: 1000px;
            height: 500px;
            margin: 0 auto;
        }
         .video_player:hover .menu{ /*這里多了 hover */
            display: block;
        }
        .video_player video {
            width: 100%;
            height: 100%;
        }

        .video_player .menu {
            position: absolute;
            width: 100%;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            bottom: 0;
            left: 0;
            display: none;
        }

        .video_player .menu .play {
            position: absolute;
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            left: 30px;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .time {
            position: absolute;
            width: 100px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            left: 100px;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>

    <div class="video_player">
        <video src="./video/mda-jgsjz4gs2ipq6d8g.mp4"></video>
        <div class="menu">
            <div class="play">播放</div>
            <div class="time"></div>
        </div>
    </div>
    <script>

        var video = document.getElementsByTagName('video')[0];
        var play = document.getElementsByClassName('play')[0];
        var time = document.getElementsByClassName('time')[0];
        var timer = null;
        play.onclick = function () {
            if (video.paused) {  //判斷是否已經播放了，如果還沒播放，返回true 
                video.play();  //觸發方法，播放視頻
                play.innerHTML = "暫停";    //修改 文字。
            } else {
                video.pause(); //暫停播放。
                play.innerHTML = "播放";
            }
        }
        video.onloadedmetadata = function () {// 視頻加載完成觸發,然后我們把時間添加到time標簽上去。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
        }

        setInterval(function () { //每隔 1秒，刷新一下時間。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
        }, 1000)


    </script>
</body>

</html>

 

添加進度條，與點擊跳轉。(效果如下) 圖片太大了，我刪了幾幀，所以看起來有點卡卡的。

 

代碼如下：(如果發現你不能跳轉，那么請看下瀏覽器的Response Headers 里面，如果你的http協議里面 只有 content-length  和 content-type   沒有 content-Range: bytes    那么這個時候不允許 點擊跳轉(不能設置時間跳轉))

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .video_player {
            position: relative;
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            overflow: hidden;
        }

        .video_player:hover .menu {
            display: block;
        }

        .video_player video {
            width: 100%;
            height: 100%;
        }

        .video_player .menu {
            position: absolute;
            width: 100%;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            bottom: 0;
            left: 0;
            display: none;
        }

        .video_player .menu .play {
            position: absolute;
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            left: 30px;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .time {
            position: absolute;
            width: 100px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            left: 100px;
            transform: translateY(-50%);
        }
        /* 樣式 */
        .progress_bar {
            position: absolute;
            top: -6px;
            left: 0;
            width: 100%;
            height: 6px;
            background-color: #ccc;
            transition: height .2s linear, top .2s linear;
        }

        .progress_bar>div {
            width: 0px;
            height: 100%;
            background-color: rgb(250, 139, 12);
        }

        .progress_bar>i {
            position: absolute;
            top: -2px;
            left: 0px;
            transform: translateX(-50%);
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 20px;
            transition: height .2s linear, top .2s linear, width .2s linear;
        }
    </style>
</head>

<body>

    <div class="video_player">
        <video src="./video/mda-jgsjz4gs2ipq6d8g.mp4"></video>
        <div class="menu">
            <div class="play">播放</div>
            <div class="time"></div>
            <div class="progress_bar">
                <div></div>
                <i></i>
            </div>
        </div>
    </div>
    <script>

        var video = document.getElementsByTagName('video')[0];
        var play = document.getElementsByClassName('play')[0];
        var time = document.getElementsByClassName('time')[0];
        var bar = document.getElementsByClassName('progress_bar')[0];
        var Current = bar.getElementsByTagName('div')[0];
        var Dot = bar.getElementsByTagName('i')[0];
        var timer = null;
        play.onclick = function () {
            if (video.paused) {  //判斷是否已經播放了，如果還沒播放，返回true 
                video.play();  //觸發方法，播放視頻
                play.innerHTML = "暫停";    //修改 文字。
            } else {
                video.pause(); //暫停播放。
                play.innerHTML = "播放";
            }
        }
        video.onloadedmetadata = function () {// 視頻加載完成觸發,然后我們把時間添加到time標簽上去。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
        }

        setInterval(function () { //每隔 1秒，刷新一下時間。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
            Current.style.width = video.currentTime / video.duration * parseInt(window.getComputedStyle(video, null).width) + "px";
            Dot.style.left = video.currentTime / video.duration * parseInt(window.getComputedStyle(video, null).width) + "px";
        }, 1000)

        bar.onmouseover = function () {  //鼠標進入的時候，進度條變大
            this.style.top = '-10px';
            this.style.height = '10px';
            Dot.style.width = '18px';
            Dot.style.height = '18px';
            Dot.style.top = '-5px';
        }
        bar.onmouseout = function () {
            this.style.top = '-6px';
            this.style.height = '6px';
            Dot.style.width = '10px';
            Dot.style.height = '10px';
            Dot.style.top = '-2px';
        }

        bar.onmousedown = function (e) { // 鼠標點擊的時候，跳轉
            Current.style.width = e.layerX + 'px'; //e.layerX 是點擊的時候的位置。
            Dot.style.left = e.layerX + 'px';
            video.currentTime = e.layerX / parseInt(window.getComputedStyle(video, null).width) * video.duration; //計算出點擊的位置在總時間里面占多少。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
        }
            
    </script>
</body>

</html>

里面有一條計算公式，簡單來說就是。當前時間 / 總時長  *  數    可以算出 當前時間，在這個數 里面的 位置。

 

添加倍數(video.palybackRate = 1.0)

樣式上有些小修改，代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .video_player {
            position: relative;
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            overflow: hidden;
        }

        .video_player video {
            width: 100%;
            height: 100%;
        }

        .video_player .menu {
            position: absolute;
            width: 100%;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            bottom: 0;
            left: 0;
        }

        .video_player .menu .play {
            position: absolute;
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            left: 30px;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .video_player .menu .play:hover{
            background-color: rgb(219, 74, 74);
        }
        .time {
            position: absolute;
            width: 100px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            left: 100px;
            transform: translateY(-50%);
        }
        /* 進度條 */
        .progress_bar {
            position: absolute;
            top: -6px;
            left: 0;
            width: 100%;
            height: 6px;
            background-color: #ccc;
            transition: height .2s linear, top .2s linear;
        }

        .progress_bar>div {
            width: 0px;
            height: 100%;
            background-color: rgb(250, 139, 12);
        }

        .progress_bar>i {
            position: absolute;
            top: -2px;
            left: 0px;
            transform: translateX(-50%);
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 20px;
            transition: height .2s linear, top .2s linear, width .2s linear;
        }
        /* 倍數 */
        li{
            list-style: none;
        }
        .speed{
            position: absolute;
            top: 50%;
            right: 150px;
            transform: translateY(-50%);
            color: white;
            text-align: center;
            line-height: 30px;
        }
        .speed div{
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            cursor: pointer;
        }
        .speed ul{
            position: absolute;
            top: -170px;
            left: -4px;
            padding-bottom: 25px;
            display: none;
        }
        .speed ul li {
            padding: 0 10px;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .speed ul li:nth-of-type(1){
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .speed ul li:nth-last-of-type(1){
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .speed ul li:hover{
            background-color: rgb(219, 74, 74);
        }
        .speed div:hover{
            background-color: rgb(219, 74, 74);
        }
    </style>
</head>

<body>

    <div class="video_player">
        <video src="./video/mda-jgsjz4gs2ipq6d8g.mp4"></video>
        <div class="menu">
            <div class="play">播放</div>
            <div class="time"></div>
            <div class="progress_bar">
                <div></div>
                <i></i>
            </div>
            <div class="speed">
                <div>倍數</div>
                <ul>
                    <li>0.5x</li>
                    <li>1.0x</li>
                    <li>1.5x</li>
                    <li>1.25x</li>
                    <li>2.0x</li>
                </ul>
            </div>
        </div>
    </div>
    <script>

        var video = document.getElementsByTagName('video')[0];
        var play = document.getElementsByClassName('play')[0];
        var time = document.getElementsByClassName('time')[0];
        var bar = document.getElementsByClassName('progress_bar')[0];
        var Current = bar.getElementsByTagName('div')[0];
        var Dot = bar.getElementsByTagName('i')[0];
        var speed = document.getElementsByClassName('speed')[0].getElementsByTagName('div')[0];
        var ul = document.getElementsByClassName('speed')[0].getElementsByTagName('ul')[0]
        var timer = null;
        play.onclick = function () {
            if (video.paused) {  //判斷是否已經播放了，如果還沒播放，返回true 
                video.play();  //觸發方法，播放視頻
                play.innerHTML = "暫停";    //修改 文字。
            } else {
                video.pause(); //暫停播放。
                play.innerHTML = "播放";
            }
        }
        video.onloadedmetadata = function () {// 視頻加載完成觸發,然后我們把時間添加到time標簽上去。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
        }

        setInterval(function () { //每隔 1秒，刷新一下時間。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
            Current.style.width = video.currentTime / video.duration * parseInt(window.getComputedStyle(video, null).width) + "px";
            Dot.style.left = video.currentTime / video.duration * parseInt(window.getComputedStyle(video, null).width) + "px";
        }, 1000)

        bar.onmouseover = function () {  //鼠標進入的時候，進度條變大
            this.style.top = '-10px';
            this.style.height = '10px';
            Dot.style.width = '18px';
            Dot.style.height = '18px';
            Dot.style.top = '-5px';
        }
        bar.onmouseout = function () {
            this.style.top = '-6px';
            this.style.height = '6px';
            Dot.style.width = '10px';
            Dot.style.height = '10px';
            Dot.style.top = '-2px';
        }

        bar.onmousedown = function (e) { // 鼠標點擊的時候，跳轉
            Current.style.width = e.layerX + 'px'; //e.layerX 是點擊的時候的位置。
            Dot.style.left = e.layerX + 'px';
            video.currentTime = e.layerX / parseInt(window.getComputedStyle(video, null).width) * video.duration; //計算出點擊的位置在總時間里面占多少。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
        }
            
        // 倍數
        speed.onclick = function(){
            ul.style.display = 'block';
            this.style.backgroundColor = 'rgb(219, 74, 74)';
        }

        speed.onmouseout = function(){
            ul.style.display = 'none';
            this.style.backgroundColor = '';
        }

        ul.onmouseover = function(){
            ul.style.display = 'block';
            speed.style.backgroundColor = 'rgb(219, 74, 74)';
        }
        ul.onmouseout = function(){
            ul.style.display = 'none';
            speed.style.backgroundColor = '';
        }

        var lis = ul.getElementsByTagName('li');
        for(var i = 0; i < lis.length; i ++){
            lis[i].onclick = function(){
               video.playbackRate =  parseFloat( this.innerHTML ); //調節倍數最小不能小於0 
               speed.innerHTML = this.innerHTML;
            }
        }

    </script>
</body>

</html>

 

添加音量條(video.volum = 1  1到0之間。1是默認音量)

代碼如下：

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .video_player {
            position: relative;
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            overflow: hidden;
        }

        .video_player video {
            width: 100%;
            height: 100%;
        }

        .video_player .menu {
            position: absolute;
            width: 100%;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            bottom: 0;
            left: 0;
        }

        .video_player .menu .play {
            position: absolute;
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            left: 30px;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .video_player .menu .play:hover {
            background-color: rgb(219, 74, 74);
        }

        .time {
            position: absolute;
            width: 100px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            left: 100px;
            transform: translateY(-50%);
        }

        /* 進度條 */
        .progress_bar {
            position: absolute;
            top: -6px;
            left: 0;
            width: 100%;
            height: 6px;
            background-color: #ccc;
            transition: height .2s linear, top .2s linear;
        }

        .progress_bar>div {
            width: 0px;
            height: 100%;
            background-color: rgb(250, 139, 12);
        }

        .progress_bar>i {
            position: absolute;
            top: -2px;
            left: 0px;
            transform: translateX(-50%);
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 20px;
            transition: height .2s linear, top .2s linear, width .2s linear;
        }

        /* 倍數 */
        li {
            list-style: none;
        }

        .speed {
            position: absolute;
            top: 50%;
            right: 150px;
            transform: translateY(-50%);
            color: white;
            text-align: center;
            line-height: 30px;
        }

        .speed div {
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            cursor: pointer;
        }

        .speed ul {
            position: absolute;
            top: -170px;
            left: -4px;
            padding-bottom: 25px;
            display: none;
        }

        .speed ul li {
            padding: 0 10px;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .speed ul li:nth-of-type(1) {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .speed ul li:nth-last-of-type(1) {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .speed ul li:hover {
            background-color: rgb(219, 74, 74);
        }

        .speed div:hover {
            background-color: rgb(219, 74, 74);
        }

        /* 音量 */
        .volume {
            position: absolute;
            top: 50%;
            right: 80px;
            transform: translateY(-50%);
            color: white;
            text-align: center;
            line-height: 30px;
        }

        .volume > span {
            display: block;
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            cursor: pointer;
        }
        .volume > span:hover{
            background-color: rgb(219, 74, 74);
        }
        .volume .Controller {
            position: absolute;
            top: -170px;
            width: 50px;
            height: 150px;
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .volume .Controller div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            width: 5px;
            height: 100px;
            background-color: #ccc;
            
        }

        .volume .Controller div::before {
            position: absolute;
            content: '';
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 100px;
            background-color: rgb(250, 139, 12);
            ;
        }

        .volume .Controller div::after {
            position: absolute;
            content: '';
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            width: 8px;
            height: 8px;
            background-color: white;
            ;
            border-radius: 10px;
        }
    </style>
</head>

<body>

    <div class="video_player">
        <video src="./video/mda-jgsjz4gs2ipq6d8g.mp4"></video>
        <div class="menu">
            <div class="play">播放</div>
            <div class="time"></div>
            <div class="progress_bar">
                <div></div>
                <i></i>
            </div>
            <div class="speed">
                <div>倍數</div>
                <ul>
                    <li>0.5x</li>
                    <li>1.0x</li>
                    <li>1.5x</li>
                    <li>1.25x</li>
                    <li>2.0x</li>
                </ul>
            </div>
            <div class="volume">
                <span>音量</span>
                <div class="Controller">
                    <div></div>
                    <i></i>
                </div>
            </div>
        </div>
    </div>
    <script>

        var video = document.getElementsByTagName('video')[0];
        var play = document.getElementsByClassName('play')[0];
        var time = document.getElementsByClassName('time')[0];
        var bar = document.getElementsByClassName('progress_bar')[0];
        var Current = bar.getElementsByTagName('div')[0];
        var Dot = bar.getElementsByTagName('i')[0];
        var speed = document.getElementsByClassName('speed')[0].getElementsByTagName('div')[0];
        var ul = document.getElementsByClassName('speed')[0].getElementsByTagName('ul')[0];
        var Controller = document.getElementsByClassName('Controller')[0];
        var volume = document.getElementsByClassName('volume')[0].getElementsByTagName('span')[0];
        var timer = null;
        play.onclick = function () {
            if (video.paused) {  //判斷是否已經播放了，如果還沒播放，返回true 
                video.play();  //觸發方法，播放視頻
                play.innerHTML = "暫停";    //修改 文字。
            } else {
                video.pause(); //暫停播放。
                play.innerHTML = "播放";
            }
        }
        video.onloadedmetadata = function () {// 視頻加載完成觸發,然后我們把時間添加到time標簽上去。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
        }

        setInterval(function () { //每隔 1秒，刷新一下時間。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
            Current.style.width = video.currentTime / video.duration * parseInt(window.getComputedStyle(video, null).width) + "px";
            Dot.style.left = video.currentTime / video.duration * parseInt(window.getComputedStyle(video, null).width) + "px";
        }, 1000)

        bar.onmouseover = function () {  //鼠標進入的時候，進度條變大
            this.style.top = '-10px';
            this.style.height = '10px';
            Dot.style.width = '18px';
            Dot.style.height = '18px';
            Dot.style.top = '-5px';
        }
        bar.onmouseout = function () {
            this.style.top = '-6px';
            this.style.height = '6px';
            Dot.style.width = '10px';
            Dot.style.height = '10px';
            Dot.style.top = '-2px';
        }

        bar.onmousedown = function (e) { // 鼠標點擊的時候，跳轉
            Current.style.width = e.layerX + 'px'; //e.layerX 是點擊的時候的位置。
            Dot.style.left = e.layerX + 'px';
            video.currentTime = e.layerX / parseInt(window.getComputedStyle(video, null).width) * video.duration; //計算出點擊的位置在總時間里面占多少。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
        }

        // 倍數
        speed.onclick = function () {
            ul.style.display = 'block';
            this.style.backgroundColor = 'rgb(219, 74, 74)';
        }

        speed.onmouseout = function () {
            ul.style.display = 'none';
            this.style.backgroundColor = '';
        }

        ul.onmouseover = function () {
            ul.style.display = 'block';
            speed.style.backgroundColor = 'rgb(219, 74, 74)';
        }
        ul.onmouseout = function () {
            ul.style.display = 'none';
            speed.style.backgroundColor = '';
        }

        var lis = ul.getElementsByTagName('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                video.playbackRate = parseFloat(this.innerHTML); //調節倍數 0 到正無窮
                speed.innerHTML = this.innerHTML;
            }
        }

        // 音量
        volume.onclick = function(){
            Controller.style.display = 'block';
            this.style.backgroundColor = 'rgb(219, 74, 74)';
        }

        Controller.getElementsByTagName('div')[0].onmousedown = function (e) {
            this.onmousemove = function (e) {
                if (100 - e.offsetY > 100) {  // 這里為什么要減100 是因為，Y的頂點是0， 但是我們日常是用頂點是100，把數倒了而已。
                    document.styleSheets[0].addRule('.volume .Controller div::before', 'height: 100px'); // 修改偽元素。 因為我用的是偽元素做音量條
                    document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: 100px');
                    video.volume = 1;       // 修改音量。 0-1 之間， 1是默認音量
                } else if (100 - e.offsetY < 0) {
                    document.styleSheets[0].addRule('.volume .Controller div::before', 'height: 0px');
                    document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: 0px');
                    video.volume = 0;
                } else {
                    document.styleSheets[0].addRule('.volume .Controller div::before', 'height: ' + (100 - e.offsetY) + 'px');
                    document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: ' + (100 - e.offsetY) + 'px');
                    video.volume = (100 - e.offsetY) * 0.01;
                }
                
            }
            this.onmouseout = function () {
                Controller.onmousemove = function (e) {
                    if (150 - e.offsetY - 25 > 100) {
                        document.styleSheets[0].addRule('.volume .Controller div::before', 'height: 100px');
                        document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: 100px');
                        video.volume = 1;
                    } else if (150 - e.offsetY - 25 < 0) {
                        document.styleSheets[0].addRule('.volume .Controller div::before', 'height: 0px');
                        document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: 0px');
                        video.volume = 0;
                    } else {
                        document.styleSheets[0].addRule('.volume .Controller div::before', 'height: ' + (150 - e.offsetY - 25) + 'px');
                        document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: ' + (150 - e.offsetY - 25) + 'px');
                        video.volume = (150 - e.offsetY - 25) * 0.01;
                    }
                    Controller.getElementsByTagName('div')[0].onmouseover = function () {
                        Controller.onmousemove = false;
                        Controller.getElementsByTagName('div')[0].onmousemove = false;
                    }

                }
            }
            document.body.onmouseup = function(){
                Controller.onmousemove = false;
                Controller.getElementsByTagName('div')[0].onmousemove = false;
                Controller.getElementsByTagName('div')[0].onmouseout = false;
                Controller.style.display = 'none';
                volume.style.backgroundColor = '';
            }
        }
    </script>
</body>

</html>

 

全屏模式

 

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .video_player {
            position: relative;
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            overflow: hidden;
        }

        .video_player video {
            width: 100%;
            height: 100%;
        }

        .video_player .menu {
            position: absolute;
            width: 100%;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            bottom: 0;
            left: 0;
        }

        .video_player .menu .play {
            position: absolute;
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            left: 30px;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .video_player .menu .play:hover {
            background-color: rgb(219, 74, 74);
        }

        .time {
            position: absolute;
            width: 100px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            left: 100px;
            transform: translateY(-50%);
        }

        /* 進度條 */
        .progress_bar {
            position: absolute;
            top: -6px;
            left: 0;
            width: 100%;
            height: 6px;
            background-color: #ccc;
            transition: height .2s linear, top .2s linear;
        }

        .progress_bar>div {
            width: 0px;
            height: 100%;
            background-color: rgb(250, 139, 12);
        }

        .progress_bar>i {
            position: absolute;
            top: -2px;
            left: 0px;
            transform: translateX(-50%);
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 20px;
            transition: height .2s linear, top .2s linear, width .2s linear;
        }

        /* 倍數 */
        li {
            list-style: none;
        }

        .speed {
            position: absolute;
            top: 50%;
            right: 150px;
            transform: translateY(-50%);
            color: white;
            text-align: center;
            line-height: 30px;
        }

        .speed div {
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            cursor: pointer;
        }

        .speed ul {
            position: absolute;
            top: -170px;
            left: -4px;
            padding-bottom: 25px;
            display: none;
        }

        .speed ul li {
            padding: 0 10px;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .speed ul li:nth-of-type(1) {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .speed ul li:nth-last-of-type(1) {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .speed ul li:hover {
            background-color: rgb(219, 74, 74);
        }

        .speed div:hover {
            background-color: rgb(219, 74, 74);
        }

        /* 音量 */
        .volume {
            position: absolute;
            top: 50%;
            right: 80px;
            transform: translateY(-50%);
            color: white;
            text-align: center;
            line-height: 30px;
        }

        .volume>span {
            display: block;
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            cursor: pointer;
        }

        .volume>span:hover {
            background-color: rgb(219, 74, 74);
        }

        .volume .Controller {
            position: absolute;
            top: -170px;
            width: 50px;
            height: 150px;
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .volume .Controller div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            width: 5px;
            height: 100px;
            background-color: #ccc;

        }

        .volume .Controller div::before {
            position: absolute;
            content: '';
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 100px;
            background-color: rgb(250, 139, 12);
            ;
        }

        .volume .Controller div::after {
            position: absolute;
            content: '';
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 10px;
        }
/* 全屏 */
        .full {
            position: absolute;
            width: 50px;
            height: 30px;
            border: 1px solid white;
            border-radius: 10px;
            color: white;
            text-align: center;
            line-height: 30px;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="video_player">
        <video src="./video/mda-jgsjz4gs2ipq6d8g.mp4"></video>
        <div class="menu">
            <div class="play">播放</div>
            <div class="time"></div>
            <div class="progress_bar">
                <div></div>
                <i></i>
            </div>
            <div class="speed">
                <div>倍數</div>
                <ul>
                    <li>0.5x</li>
                    <li>1.0x</li>
                    <li>1.5x</li>
                    <li>1.25x</li>
                    <li>2.0x</li>
                </ul>
            </div>
            <div class="volume">
                <span>音量</span>
                <div class="Controller">
                    <div></div>
                    <i></i>
                </div>
            </div>
            <div class="full">全屏</div>
        </div>
    </div>
    <script>

        var video = document.getElementsByTagName('video')[0];
        var play = document.getElementsByClassName('play')[0];
        var time = document.getElementsByClassName('time')[0];
        var bar = document.getElementsByClassName('progress_bar')[0];
        var Current = bar.getElementsByTagName('div')[0];
        var Dot = bar.getElementsByTagName('i')[0];
        var speed = document.getElementsByClassName('speed')[0].getElementsByTagName('div')[0];
        var ul = document.getElementsByClassName('speed')[0].getElementsByTagName('ul')[0];
        var Controller = document.getElementsByClassName('Controller')[0];
        var volume = document.getElementsByClassName('volume')[0].getElementsByTagName('span')[0];
        var full = document.getElementsByClassName('full')[0];
        var video_player = document.getElementsByClassName('video_player')[0]
        var timer = null;
        var lock = true;
        play.onclick = function () {
            if (video.paused) {  //判斷是否已經播放了，如果還沒播放，返回true 
                video.play();  //觸發方法，播放視頻
                play.innerHTML = "暫停";    //修改 文字。
            } else {
                video.pause(); //暫停播放。
                play.innerHTML = "播放";
            }
        }
        video.onloadedmetadata = function () {// 視頻加載完成觸發,然后我們把時間添加到time標簽上去。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
        }

        setInterval(function () { //每隔 1秒，刷新一下時間。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
            Current.style.width = video.currentTime / video.duration * parseInt(window.getComputedStyle(video, null).width) + "px";
            Dot.style.left = video.currentTime / video.duration * parseInt(window.getComputedStyle(video, null).width) + "px";
        }, 1000)

        bar.onmouseover = function () {  //鼠標進入的時候，進度條變大
            this.style.top = '-10px';
            this.style.height = '10px';
            Dot.style.width = '18px';
            Dot.style.height = '18px';
            Dot.style.top = '-5px';
        }
        bar.onmouseout = function () {
            this.style.top = '-6px';
            this.style.height = '6px';
            Dot.style.width = '10px';
            Dot.style.height = '10px';
            Dot.style.top = '-2px';
        }

        bar.onmousedown = function (e) { // 鼠標點擊的時候，跳轉
            Current.style.width = e.layerX + 'px'; //e.layerX 是點擊的時候的位置。
            Dot.style.left = e.layerX + 'px';
            video.currentTime = e.layerX / parseInt(window.getComputedStyle(video, null).width) * video.duration; //計算出點擊的位置在總時間里面占多少。
            time.innerHTML = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
        }

        // 倍數
        speed.onclick = function () {
            ul.style.display = 'block';
            this.style.backgroundColor = 'rgb(219, 74, 74)';
        }

        speed.onmouseout = function () {
            ul.style.display = 'none';
            this.style.backgroundColor = '';
        }

        ul.onmouseover = function () {
            ul.style.display = 'block';
            speed.style.backgroundColor = 'rgb(219, 74, 74)';
        }
        ul.onmouseout = function () {
            ul.style.display = 'none';
            speed.style.backgroundColor = '';
        }

        var lis = ul.getElementsByTagName('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                video.playbackRate = parseFloat(this.innerHTML); //調節倍數 0 到正無窮
                speed.innerHTML = this.innerHTML;
            }
        }

        // 音量
        volume.onclick = function () {
            Controller.style.display = 'block';
            this.style.backgroundColor = 'rgb(219, 74, 74)';
        }

        Controller.getElementsByTagName('div')[0].onmousedown = function (e) {
            this.onmousemove = function (e) {
                if (100 - e.offsetY > 100) {  // 這里為什么要減100 是因為，Y的頂點是0， 但是我們日常是用頂點是100，把數倒了而已。
                    document.styleSheets[0].addRule('.volume .Controller div::before', 'height: 100px'); // 修改偽元素。 因為我用的是偽元素做音量條
                    document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: 100px');
                    video.volume = 1;       // 修改音量。 0-1 之間， 1是默認音量
                } else if (100 - e.offsetY < 0) {
                    document.styleSheets[0].addRule('.volume .Controller div::before', 'height: 0px');
                    document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: 0px');
                    video.volume = 0;
                } else {
                    document.styleSheets[0].addRule('.volume .Controller div::before', 'height: ' + (100 - e.offsetY) + 'px');
                    document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: ' + (100 - e.offsetY) + 'px');
                    video.volume = (100 - e.offsetY) * 0.01;
                }

            }
            this.onmouseout = function () {
                Controller.onmousemove = function (e) {
                    if (150 - e.offsetY - 25 > 100) {
                        document.styleSheets[0].addRule('.volume .Controller div::before', 'height: 100px');
                        document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: 100px');
                        video.volume = 1;
                    } else if (150 - e.offsetY - 25 < 0) {
                        document.styleSheets[0].addRule('.volume .Controller div::before', 'height: 0px');
                        document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: 0px');
                        video.volume = 0;
                    } else {
                        document.styleSheets[0].addRule('.volume .Controller div::before', 'height: ' + (150 - e.offsetY - 25) + 'px');
                        document.styleSheets[0].addRule('.volume .Controller div::after', 'bottom: ' + (150 - e.offsetY - 25) + 'px');
                        video.volume = (150 - e.offsetY - 25) * 0.01;
                    }
                    Controller.getElementsByTagName('div')[0].onmouseover = function () {
                        Controller.onmousemove = false;
                        Controller.getElementsByTagName('div')[0].onmousemove = false;
                    }

                }
            }
            document.body.onmouseup = function () {
                Controller.onmousemove = false;
                Controller.getElementsByTagName('div')[0].onmousemove = false;
                Controller.getElementsByTagName('div')[0].onmouseout = false;
                Controller.style.display = 'none';
                volume.style.backgroundColor = '';
            }
        }

        // 全屏
        full.onclick = function () {
            if (lock) {  //聲明一個變量來當狀態。
                lock = false;
                video_player.style.height = window.screen.height + 'px'; //獲取屏幕的寬高
                video_player.style.width = window.screen.width + 'px';
                document.documentElement.requestFullscreen();   //全屏模式
                full.innerHTML = '退出';
            } else {
                lock = true;
                video_player.style.height = 500 + 'px';
                video_player.style.width = 1000 + 'px';
                document.exitFullscreen();   //退出全屏
                full.innerHTML = '全屏';
            }
        }
    </script>
</body>

</html>

 最后還有幾個屬性：

　　autoplay =“autoplay”  自動播放

　　muted 靜音播放

　　loop 循環播放

 

有些瀏覽器可能不支持MP4的視頻格式，但一般會支持webm格式，所以為了兼容性，我們一般書寫src在source元素里面 放上兩個視頻，支持哪個播放哪個

<video>
    不在video元素書寫src  在source元素書寫，
    <source src=".mp4">
    <source src=".webm">
</video>

 

最后，代碼可能有點亂，有需要的自己整理一下哈。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 H5 video的使用 h5視頻標簽 video H5 video 常用屬性 h5 video標簽的使用 H5中video使用 H5 video 標簽 詳解 h5 的video視頻控件 H5新屬性audio音頻和 video視頻的控制詳解（controls） H5系列之contenteditable H5系列之svg
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM