欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用JS制作可交互的視頻進(jìn)度條的案例分享

 更新時(shí)間：2024年04月19日 11:34:42   作者：呆同學(xué)  
這篇文章主要介紹了用JS制作可交互的視頻進(jìn)度條的案例,在開(kāi)始制作視頻進(jìn)度條之前,想先給大家補(bǔ)充一些關(guān)于元素的一些特點(diǎn)和用法,為大家更好地理解接下來(lái)的分享,感興趣的朋友可以參考下

前言

在開(kāi)始制作視頻進(jìn)度條之前，想先給大家補(bǔ)充一些關(guān)于元素的一些特點(diǎn)和用法，為大家更好地理解接下來(lái)的分享。

塊級(jí)元素

  • 特點(diǎn)：

    塊級(jí)元素會(huì)默認(rèn)占據(jù)一整行，每個(gè)元素都會(huì)從新的一行開(kāi)始，并且盡可能撐滿其父元素的寬度。

    可以設(shè)置寬度（width）、高度（height）、內(nèi)邊距（padding）、外邊距（margin）等屬性。

    常見(jiàn)的塊級(jí)元素有 <div>、<p>、<h1> 到 <h6>、<ul>、<li> 等。

行內(nèi)塊級(jí)元素

  • 特點(diǎn)：

    行內(nèi)塊級(jí)元素不會(huì)默認(rèn)占據(jù)一整行，它們可以在一行內(nèi)并排顯示，但可以設(shè)置寬度和高度。

    可以設(shè)置寬度、高度、內(nèi)邊距和外邊距等屬性。

    常見(jiàn)的行內(nèi)塊級(jí)元素有 <span>、<img>、<input> 等。

    常見(jiàn)的塊級(jí)元素，例如 <a> 和 <button>，如果設(shè)置了 display: inline-block; 樣式，也會(huì)變成行內(nèi)塊級(jí)元素。

行內(nèi)元素

  • 特點(diǎn)：

    行內(nèi)元素不會(huì)默認(rèn)占據(jù)一整行，它們會(huì)在同一行內(nèi)顯示，并且會(huì)盡量不破壞當(dāng)前文檔流。

    不能設(shè)置寬度和高度，設(shè)置的話也不會(huì)生效。

    常見(jiàn)的行內(nèi)元素有 <span>、<a>、<strong>、<em>、<img> 等。

    行內(nèi)元素通常用于包裹文本或其他行內(nèi)元素，并且不會(huì)破壞文本的連續(xù)性。

在設(shè)計(jì)控制視頻進(jìn)度條的布局時(shí)，你可以根據(jù)這些元素的特點(diǎn)來(lái)選擇合適的元素類(lèi)型，并結(jié)合 CSS 樣式來(lái)實(shí)現(xiàn)你的設(shè)計(jì)。那么接下來(lái)，開(kāi)干！

第一部分：HTML

<body>
    <div class="wrapper">
        <video src="./mv.mp4" width="765" height="430" controls class="video"></video>

        <div class="speed">
            <div class="speed-bar">1x</div>
        </div>
    </div>

<script src="./index.js"></script>
</body>
  • <video> 元素，用于在網(wǎng)頁(yè)上嵌入視頻。src="./mv.mp4" 屬性指定視頻文件的路徑，大家自行準(zhǔn)備任意視頻文件。controls 屬性表示顯示視頻控制條，使用戶可以播放、暫停、調(diào)整音量等。
  • <script src="./index.js"></script>: 引入 JavaScript 文件。后面有JS部分代碼，必須引入。

第二部分：CSS樣式

* {
    /* 外邊距 */
    margin: 0;
    /* 內(nèi)邊距 */
    padding: 0;
}
  • 這是一個(gè)通用選擇器，用于將所有元素的外邊距和內(nèi)邊距都設(shè)置為 0。
.wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}
  • position: fixed;這個(gè)屬性將 .wrapper 元素的定位方式設(shè)置為固定定位。當(dāng)一個(gè)元素被設(shè)置為固定定位時(shí)，它會(huì)相對(duì)于瀏覽器窗口的視口進(jìn)行定位，而不是相對(duì)于文檔流中的其他元素。
  • left: 50%; top: 50%;這兩個(gè)屬性將 .wrapper 元素的左邊緣和頂部邊緣分別定位在視口的水平中心和垂直中心。設(shè)置為 50% 表示元素的左邊緣和頂部邊緣距離視口左邊緣和頂部邊緣各自的距離為視口寬度和高度的一半。
  • transform: translate(-50%, -50%); translate(-50%, -50%) 函數(shù)將 .wrapper 元素沿著 X 軸和 Y 軸方向分別向左和向上移動(dòng)自身的寬度和高度的一半。這個(gè)技巧通常用于將一個(gè)元素水平和垂直居中顯示，特別是當(dāng)元素的寬度和高度是不確定的情況下。
  • display: flex;這個(gè)屬性將 .wrapper 元素的顯示方式設(shè)置為 Flex 布局。 Flex 布局提供了一種更靈活的方式來(lái)布局和排列元素，可以輕松實(shí)現(xiàn)水平和垂直居中以及等分布局等效果。
.speed {
    width: 50px;
    height: 430px;
    background-color: #fff;
    display: inline;
    border-radius: 50px;
    overflow: hidden;
}

.speed-bar {
    width: 100%;
    height: 16%;
    background: linear-gradient(to bottom, #2376ae, #c16ecf);
    display: flex;
    justify-content: center; 
    align-items: center;
    cursor: pointer;
}
  • display: inline;: 將速度控制條容器設(shè)置為內(nèi)聯(lián)元素。在上面的補(bǔ)充內(nèi)容中我們具體提到過(guò)。
  • border-radius: 50px;: 設(shè)置速度控制條容器的邊框半徑為 50px，使其呈現(xiàn)圓形外觀。
  • overflow: hidden;: 當(dāng)速度控制條內(nèi)容溢出容器時(shí)，隱藏溢出部分。

第三部分：JavaScript

//獲取白底容器
//在白色容器上監(jiān)聽(tīng)鼠標(biāo)的移動(dòng)事件
//獲取鼠標(biāo)移動(dòng)的距離
//根據(jù)鼠標(biāo)移動(dòng)的距離來(lái)設(shè)計(jì)彩色容器的高度

var speed = document.querySelector('.speed')
var speedBar = document.querySelector('.speed-bar')
var video = document.querySelector('.video')

speed.addEventListener('mousemove', function(e) {
    console.log(e.pageY);
    //offsetTop容器到瀏覽器頂部的距離
    var y = e.pageY - speed.getBoundingClientRect().top
    var percent = y / speed.offsetHeight 
    var height = Math.round(percent * 100) + '%'
    //用js修改speed-bar容器的高度
    speedBar.style.height = height

    var min = 0.4
    var max = 4
    var playSpeed = percent * (max - min) + min
    
    speedBar.textContent = playSpeed.toFixed(2) + 'x'
    video.playbackRate = playSpeed
})

這段 JavaScript 代碼監(jiān)聽(tīng)了速度控制條容器（.speed）上的鼠標(biāo)移動(dòng)事件，并根據(jù)鼠標(biāo)在容器內(nèi)的垂直位置來(lái)動(dòng)態(tài)調(diào)整彩色容器（.speed-bar）的高度和視頻的播放速度。讓我逐步解釋代碼的作用：

  • var speed = document.querySelector('.speed')獲取速度控制條容器的 '.speed' 元素。
  • var speedBar = document.querySelector('.speed-bar')獲取彩色容器（速度條）的 '.speed-bar' 元素。
  • var video = document.querySelector('.video')獲取視頻元素的 '.video' 元素。
  • speed.addEventListener('mousemove', function(e) { ... })監(jiān)聽(tīng)速度控制條容器上的鼠標(biāo)移動(dòng)事件。
  • var y = e.pageY - speed.getBoundingClientRect().top計(jì)算鼠標(biāo)在速度控制條容器內(nèi)的垂直位置（距離容器頂部的距離）。
  • var percent = y / speed.offsetHeight計(jì)算鼠標(biāo)在速度控制條容器內(nèi)的垂直位置相對(duì)于容器高度的百分比。
  • var height = Math.round(percent * 100) + '%'根據(jù)鼠標(biāo)垂直位置的百分比計(jì)算彩色容器的高度。
  • speedBar.style.height = height通過(guò)修改彩色容器的高度樣式來(lái)實(shí)現(xiàn)動(dòng)態(tài)變化
  • var min = 0.4 和 var max = 4置視頻的最小和最大播放速度。
  • var playSpeed = percent * (max - min) + min根據(jù)鼠標(biāo)在容器內(nèi)的垂直位置百分比來(lái)計(jì)算視頻的播放速度。
  • speedBar.textContent = playSpeed.toFixed(2) + 'x'在彩色容器上顯示當(dāng)前的播放速度。
  • video.playbackRate = playSpeed將計(jì)算出的播放速度應(yīng)用到視頻元素上。

這段代碼實(shí)現(xiàn)了根據(jù)鼠標(biāo)在速度控制條容器內(nèi)的垂直位置動(dòng)態(tài)調(diào)整彩色容器的高度，并根據(jù)高度計(jì)算出相應(yīng)的播放速度應(yīng)用到視頻元素上。

效果展示

鼠標(biāo)上下移動(dòng)可控制視頻播放速度，從上往下加快。

補(bǔ)充

因?yàn)槲覀兪菍TML、CSS和JS代碼分開(kāi)寫(xiě)的，所以必須要在HTML文件中的頭部添加<link rel="stylesheet" href="./style.css">, 以及在body中添加<script src="./index.js"></script>，你的 HTML 文件將會(huì)包含外部樣式表和 JavaScript 文件，分別用于設(shè)置頁(yè)面樣式和實(shí)現(xiàn)交互功能。

以上就是用JS制作可交互的視頻進(jìn)度條的案例分享的詳細(xì)內(nèi)容，更多關(guān)于JS可交互視頻進(jìn)度條的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論