Web前端开发技术课程实验一——制作一个视频播放页面（可控制播放/暂停）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Web前端开发技术课程实验一——制作一个视频播放页面（可控制播放/暂停）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

学习目标：

学习Web前端中的视频网页制作
学会html和js相结合
学会视频播放/暂停/放缩大小的功能

学习内容：

掌握 html 基本语法
掌握javascript基本语法
掌握条件语句

学习时间：

周一至周五晚上 7 点—晚上9点

创建html文件，补写基本代码：

<!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>

编写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>

创建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>

接下来在js文件中，来实现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';
    }
}