国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

Web前端開(kāi)發(fā)技術(shù)課程實(shí)驗(yàn)一——制作一個(gè)視頻播放頁(yè)面（可控制播放/暫停）

2年前作者：陌陌的白分類：Toy博客閱讀(23)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了Web前端開(kāi)發(fā)技術(shù)課程實(shí)驗(yàn)一——制作一個(gè)視頻播放頁(yè)面（可控制播放/暫停）。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

學(xué)習(xí)目標(biāo)：

  • 學(xué)習(xí)Web前端中的視頻網(wǎng)頁(yè)制作
  • 學(xué)會(huì)html和js相結(jié)合
  • 學(xué)會(huì)視頻播放/暫停/放縮大小的功能

學(xué)習(xí)內(nèi)容：

  1. 掌握 html?基本語(yǔ)法
  2. 掌握javascript基本語(yǔ)法
  3. 掌握條件語(yǔ)句

學(xué)習(xí)時(shí)間：?

  • 周一至周五晚上 7 點(diǎn)—晚上9點(diǎn)

創(chuàng)建html文件，補(bǔ)寫(xiě)基本代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

編寫(xiě)body部分，添加視頻和按鍵：

    <div class="cont">
        <video id="video1" src="../img/video.mp4" width="500" height="300"></video>
        <div>
            <button onclick="p()">播放/暫停</button>
            <button onclick="da()">放大</button>
            <button onclick="xiao()">縮小</button>
            <button onclick="pu()">普通</button>
        </div>
    </div>

創(chuàng)建js文件，在html中的head部分添加鏈接并編輯cont類：

<script src="js/m1.js"></script>
    <style>
        .cont{
            width:700px;
            height: 400px;
            position: relative;
            text-align: center;
            margin: 0 auto;
        }
    </style>

接下來(lái)在js文件中，來(lái)實(shí)現(xiàn)4種按鍵功能： ?

function p(){
    var v=document.getElementById("video1");
    if(video1.paused){
        v.play();
    }else{
        v.pause();
    }
}
function da(){
    var image=document.getElementById("video1");
    image.style.height=image.height*1.1+'px';
	image.style.width=image.width*1.1+'px';
}
function xiao(){
    var image=document.getElementById("video1");
    image.style.height=image.height/1.1+'px';
	image.style.width=image.width/1.1+'px';
}
function pu(){
    var image=document.getElementById("video1");
    if(image.style.height!=image.height*700+'px'&&image.style.width!=image.width*400+'px'){
        image.style.height=image.height+'px';
	    image.style.width=image.width+'px';
    }
}

小結(jié)：通過(guò)簡(jiǎn)單的函數(shù)定義與調(diào)用，來(lái)實(shí)現(xiàn)與功能調(diào)用；

對(duì)于制作（播放/暫停）一體化按鍵，可以通過(guò)運(yùn)用if()判斷語(yǔ)句，來(lái)加以實(shí)現(xiàn)；

同理視頻大小還原，也可通過(guò)將現(xiàn)有大小與原始大小相比較，來(lái)進(jìn)行判斷。

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-560981.html

到了這里，關(guān)于Web前端開(kāi)發(fā)技術(shù)課程實(shí)驗(yàn)一——制作一個(gè)視頻播放頁(yè)面（可控制播放/暫停）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包