HTML5学习笔记

最新推荐文章于 2020-11-20 10:07:09 发布

furfur-jiang

最新推荐文章于 2020-11-20 10:07:09 发布

阅读量821

点赞数

分类专栏： HTML/H5 面试

本文链接：https://blog.csdn.net/weixin_44523860/article/details/104156076

版权

面试同时被 2 个专栏收录

94 篇文章 2 订阅

订阅专栏

HTML/H5

2 篇文章 0 订阅

订阅专栏

HTML5

此篇为H5的学习，如要学习基础HTML→html基础的笔记

字符设定
常用新标签
- 表单输入类型
- 表单新属性
- 综合案例
- 表单新增的事件
多媒体标签
- 传统多媒体embed
- HS音频audio
- HS视频video
DOM扩展
H5新增接口
- 网络接口
- 全屏接口
- 读取文件
- 拖拽接口
- 地理位置
web存储
- sectionStorage
- localStorage
应用缓存
案例:自定义播放器

字符设定

HTML与XHTML中建议这样去写

<meta http-equiv="charset" content="utf-8">

HTML5的标签中建议这样去写
```
<meta charset="utf-8">
```

常用新标签

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如：图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

一、canvas

标签	描述
`<canvas>`	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

二、多媒体

标签	描述
`<audio>`	定义音频内容
`<video>`	定义视频（video 或者 movie）
`<source>`	定义多媒体资源 `<video>` 和 `<audio>` 字体
`<embed>`	定义嵌入的内容，比如插件。
`<track>`	为诸如 `<video>` 和 `<audio>` 元素之类的媒介规定外部文本轨道。

三、表单

标签	描述
`<datalist>`	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
`<keygen>`	规定用于表单的密钥对生成器字段。
`<output>`	定义不同类型的输出，比如脚本的输出。用于展示内容，只能展示，不能进行编辑

四、语义和结构

HTML5提供了新的元素来创建更好的页面结构：

标签	描述
`<article>`	定义页面的侧边栏内容
`<aside>`	定义页面内容之外的内容。
`<bdi>`	允许您设置一段文本，使其脱离其父元素的文本方向设置。
`<command>`	定义命令按钮，比如单选按钮、复选框或按钮
`<details>`	用于描述文档或文档某个部分的细节
`<dialog>`	定义对话框，比如提示框
`<summary>`	标签包含 details 元素的标题
`<figure>`	规定独立的流内容（图像、图表、照片、代码等等）。
`<figcaption>`	定义 `<figure>` 元素的标题
`<footer>`	定义 section 或 document 的页脚。
`<header>`	定义了文档的头部区域
`<mark>`	定义带有记号的文本。
`<meter>`	定义度量衡。仅用于已知最大和最小值的度量。
`<nav>`	定义运行中的进度（进程）。
`<progress>`	定义任何类型的任务的进度。
`<ruby>`	定义 ruby 注释（中文注音或字符）。
`<rt>`	定义字符（中文注音或字符）的解释或发音。
`<rp>`	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
`<section>`	定义文档中的节（section、区段）。
`<time>`	定义日期或时间。
`<wbr>`	规定在文本中的何处适合添加换行符。

例子：

表单datalist与 input 元素配合使用该元素，来定义 input 可能的值。

<input type="text" value="输入明星" list="star"/> <!--  input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  
    		<option value="刘德华">刘德华</option>
    		<option value="刘若英">刘若英</option>
    		<option value="刘晓庆">刘晓庆</option>
    		<option value="郭富城">郭富城</option>
    		<option value="张学友">张学友</option>
    		<option value="郭郭">郭郭</option>
</datalist>

表单keygen：提供一种验证用户数据的可靠方法。在提交表单数据的时候，会生成两个键，一个私钥，一个公钥。私钥存储在本地，公钥发送到服务器。在需要做验证的时候，我们可以从服务器下载一个客户端证书，通过私钥和证书来实现相关的验证操作。
结构meter : 度量器，可用于标示级别

属性	值	描述
high	number	定义度量的值位于哪个点，被界定为高的值。
low	number	定义度量的值位于哪个点，被界定为低的值。
max	number	定义最大值。默认值是 1。
min	number	定义最小值。默认值是 0。
optimum	number	定义什么样的度量值是最佳的值。如果该值高于 “high” 属性，则意味着值越高越好。如果该值低于 “low” 属性的值，则意味着值越低越好。
value	number	定义度量的值。

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用
- 将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到<fieldset>标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
- legend 元素为 fieldset 元素定义标题（caption）。

<fieldset>
    		<legend>用户登录</legend>  标题
    		用户名: <input type="text"><br /><br />
    		密　码: <input type="password">
</fieldset>

表单输入类型

类型	使用示例	含义
email	`<input type="email">`	输入邮箱格式
tel	`<input type="tel">`	输入手机号码格式
url	`<input type="url">`	输入url格式
number	`<input type="number">`	输入数字格式
search	`<input type="search">`	搜索框（体现语义化）
range	`<input type="range">`	自由拖动滑块
color	`<input type="color">`	拾色器，通过value进行取值
time	`<input type="time">`	小时分钟
date	`<input type="date">`	年月日
datetime	`<input type="datetime">`	时间
month	`<input type="month">`	月年
week	`<input type="week">`	星期年

表单新属性

属性	用法	含义
placeholder	`<input type="text" placeholder="请输入用户名">`	占位符当用户输入的时候里面的文字消失删除所有文字，自动返回
autofocus	`<input type="text" autofocus>`	规定当页面加载时 input 元素应该自动获得焦点
multiple	`<input type="file" multiple>`	多文件上传
autocomplete	`<input type="text" autocomplete="off">`	规定表单是否应该启用自动完成功能；1. on /2. off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字
required	`<input type="text" required>`	必填项内容不能为空
accesskey	`<input type="text" accesskey="s">`	规定激活（使元素获得焦点）元素的快捷键采用 alt + s的形式
pattern	`<input type="tel" pattern="^1\d{10}$">`	正则表达式验证表单
novalidate		关闭验证，可用于`<form>`标签
form		指定表单项属于哪个form，处理复杂表单时会需要

综合案例

<form action="">
  <fieldset>
    <legend>学生档案</legend>
    <label for="userName">姓名:</label>
    <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
    <label for="userPhone">手机号码:</label>
    <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
    <label for="email">邮箱地址:</label>
    <input type="email" required name="email" id="email"><br>
    <label for="collage">所属学院:</label>
    <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
    <datalist id="cList">
      <option value="前端与移动开发学院"></option>
      <option value="java学院"></option>
      <option value="c++学院"></option>
    </datalist><br>
    <label for="score">入学成绩:</label>
    <input type="number" max="100" min="0" value="0" id="score"><br>
   <form action="">
    <fieldset>
    	<legend>学生档案思密达</legend>
    	<label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br />
    	<label>手机号: <input type="tel" /></label> <br /><br />
    	<label>邮箱: <input type="email" /></label> <br /><br />
    	<label>所属学院:  <input type="text" placeholder="请选择学院" list="xueyuan"/>
    	<datalist id="xueyuan">
    		<option>java学院</option>
    		<option>前端学院</option>
    		<option>php学院</option>
    		<option>设计学院</option>
    	</datalist>
    	<br /><br />
    	<label>出生日期:   <input type="date" /></label> <br /><br />
    	<label>成绩:  <input type="number" /></label> <br /><br />
    	<label>毕业时间:  <input type="date" /></label> <br /><br />
    	<input type="submit" />  <input type="reset" />
    </fieldset>
    </form>
    <label for="inTime">入学日期:</label>
    <input type="date" id="inTime" name="inTime"><br>
    <label for="leaveTime">毕业日期:</label>
    <input type="date" id="leaveTime" name="leaveTime"><br>
    <input type="submit">
  </fieldset>
</form>

表单新增的事件

oninput 用户输入内容时触发，可用于移动端输入字数统计
oninvalid 验证不通过时触发

/*oninput可以监听用户的每一次输入*/    
document.getElementById("name").oninput=function(){        console.log(this.value);    }    /*监听键盘弹起，每一个键盘弹出触发一次*/    
document.getElementById("name").onkeyup=function()
{        console.log("---"+this.value);    }    /*当指定表单元素验证不通过时触发*/    
document.getElementById("phone").oninvalid=function(){        console.log("验证不通过");    }

多媒体标签

embed：标签定义嵌入的内容
audio：播放音频
video：播放视频

传统多媒体 embed

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

因为兼容性问题，我们这里只讲解插入网络视频，后面H5会讲解 audio 和video 视频多媒体。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

H5音频audio

HTML5通过<audio>标签来解决音频播放的问题。

通过附加属性可以更友好控制音频的播放，如：

autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放如果不写默认播放一次； loop 或者 loop = “loop” 表示无限循环
preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。

在这里插入图片描述

多浏览器支持的方案：

<source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择

在这里插入图片描述

H5视频 video

附加属性可以更友好的控制视频的播放

autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
width 设置播放窗口宽度
height 设置播放窗口的高度

在这里插入图片描述

多浏览器支持的方案，如下图

在这里插入图片描述

DOM扩展

获取元素:
- document.getElementsByClassName (‘class’) 通过类名获取元素，以类数组形式存在。getElementsByTagName(‘class’) [n]
- document.querySelector(‘selector’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。
  - 类选择器要加.，id 选择器要加#
- document.querySelectorAll(‘selector’) 通过CSS选择器获取元素，以类数组形式存在。
类名操作:
- Node.classList.add(‘class’) 添加class,一次一个
  - 原Node.className=“red underline” 需要防止所有类名被覆盖
- Node.classList.remove(‘class’) 移除class，一次一个
- Node.classList.toggle(‘class’) 切换class，有则移除，无则添加
- Node.classList.contains(‘class’) 检测是否存在class
  - 原Node.classList.item(‘class’) 获取类名称
```
document.querySelector('selector').classList.add('class')
```
自定义属性：
- 规范：data-开头；data-后必须至少有一个字符，多个单词使用-连接
  建议：名称应该都使用小写–不要包含任何的大写字符；不要有任何的特殊符号；不要纯数字
- 在HTML5中我们可以自定义属性，其格式如下 data-*=" "，例如：data-info=“我是自定义属性”，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
- 如下格式设置时，则需以驼峰格式才能正确获取：data-my-name=“itcast”，获取Node.dataset[‘myName’]

H5新增接口

网络接口

    /*1.ononline:网络连通的时候触发这个事件*/
    window.addEventListener("online",function(){
        alert("网络连通了");
    });

    /*2.onoffline:网络断开时触发*/
    window.addEventListener("offline",function(){
        alert("网络断开了");
    })

全屏接口

全屏操作的主要方法和属性

requestFullScreen():开启全屏显示
不同浏览器需要添加不同的前缀：chrome:webkit firefox:moz ie:ms opera:o （不支持ie9）
cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
fullScreenElement:是否是全屏状态，也只能使用document进行判断

window.onload=function(){
        var div=document.querySelector("div");
        /*添加三个按钮的点击事件*/
        /*全屏操作*/
        document.querySelector("#full").onclick=function(){
            /*使用能力测试添加不同浏览器下的前缀*/
            if(div.requestFullScreen){
                div.requestFullScreen();
            }
            else if(div.webkitRequestFullScreen){
                div.webkitRequestFullScreen();
            }
            else if(div.mozRequestFullScreen){
                div.mozRequestFullScreen();
            }
            else if(div.msRequestFullScreen){
                div.msRequestFullScreen();
            }
        }
        /*退出全屏*/
        document.querySelector("#cancelFull").onclick=function(){
            if(document.cancelFullScreen){
                document.cancelFullScreen();
            }
            else if(document.webkitCancelFullScreen){
                document.webkitCancelFullScreen();
            }
            else if(document.mozCancelFullScreen){
                document.mozCancelFullScreen();
            }
            else if(document.msCancelFullScreen){
                document.msCancelFullScreen();
            }
        }
        /*判断是否是全屏状态*/
        document.querySelector("#isFull").onclick=function(){
            /*两个细节：使用document判断  能力测试*/
         if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
                alert(true);
            }
            else{
                alert(false);
            }
        }
    }

读取文件

FileReader读取文件

readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8
readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
readAsDataURL():读取文件内容:读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL；DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中->优化网站的加载速度和执行效率。
说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中
需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)
文件存储在file表单元素的files属性中，它是一个数组
abort():中断读取
FileReader提供一个完整的事件模型，用来捕获读取文件时的状态
- onabort:读取文件中断片时触发
- onerror:读取错误时触发
- onload:文件读取成功完成时触发
- onloadend:读取完成时触发，无论成功还是失败
- onloadstart:开始读取时触发
- onprogress:读取文件过程中持续触发

实例需求：即时预览
即时：当用户选择完图片之后就立刻进行预览的处理 >>onchange
预览：通过文件读取对象的readAsDataURL()完成

<form action="">
    文件： <input type="file" name="myFile" id="myFile" onchange="getFileContent();"> <br>
    <div></div>
    <input type="submit">
</form>
<img src="" alt="">

 function getFileContent(){
       /*1.创建文件读取对象*/
        var reader=new FileReader();
        /*2.读取文件，获取DataURL*/
        var file=document.querySelector("#myFile").files;
        reader.readAsDataURL(file[0]);
        /*获取数据*/
        reader.onload=function(){
            //console.log(reader.result);
            /*展示*/
            document.querySelector("img").src=reader.result;
        }
        reader.onprogress=function(e){
            var percent= e.loaded/ e.total*100+"%";
            div.style.width=percent;
        }
    }

拖拽接口

应用于被拖拽元素的事件

ondrag 应用于拖拽元素，整个拖拽过程都会调用–持续
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用

应用于目标元素的事件

ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用，阻止浏览器的默认行为e.preventDefault()为了触发ondragleave
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用，追加元素
ondragleave 应用于目标元素，当鼠标离开目标元素时调用，默认不会被触发，必须在ondragover阻止浏览器的默认行为e.preventDefault()

拖拽通用例子

e.target可以获取被拖拽元素

通过dataTransfer来实现数据的存储与获取
setData(format,data):

format:数据的类型：text/html text/uri-list
Data:数据:一般来说是字符串值

添加元素 e.target.appendChild(obj);通过e.dataTransfer.setData存储的数据，只能在drop事件中获取

<div class="div1" id="div1">
    <!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->
    <p id="pe" draggable="true">试着把我拖过去</p>
    <p id="pe1" draggable="true">试着也把我拖过去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>

var obj=null;//全局变量，当前被拖拽的地元素
document.ondragstart=function(e){
    /*通过事件捕获来获取当前被拖拽的子元素*/
    e.target.style.opacity=0.5;
    e.target.parentNode.style.borderWidth="5px";
    obj= e.target;
        e.dataTransfer.setData("text/html", e.target.id);
    }
    document.ondragend=function(e){
        e.target.style.opacity=1;
        e.target.parentNode.style.borderWidth="1px";
    }
    document.ondragleave=function(e){
    }
    document.ondrag=function(e){
    }
    document.ondragenter=function(e){
        console.log(e.target);
    }
    document.ondragover=function(e){
        /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
        e.preventDefault();
    }
    /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
    document.ondrop=function(e){
        var id=e.dataTransfer.getData("text/html");
        /*console.log("id="+id);*/
        e.target.appendChild(document.getElementById(id));
    }
    document.ondragleave=function(e){
}

地理位置

获取地理信息成功之后的回调success
获取地理信息失败之后的回调
调整获取当前地进信息的方式

navigator.geolocation.getCurrentPosition(success，error , option)

option：可以设置获取数据的方式

enableHi ghAccuracy; true/false:是否使用高精度
timeout:设置超时时间，单位ms
maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位是ms

成功回调后可以使用（success方法需要参数position）：position.coords.latitude 纬度/longitude经度/accuracy精度/altitude 湖拔高度

第三方地理定位接口

申请密钥，打开api，复制代码

web存储

sectionStorage

sectionStorage :存储数据到本地，存储的容量5mb左右。

这个数据本质是存储在当前页面内存中
生命周期为关闭当前页面,关闭页面，数据自动清除
可以在Application/Resources找到存储的数据

setItem(key , value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容

    var userData=document.getElementById("userName");
    //存储数据
    document.getElementById("setData").onclick=function(){
        window.sessionStorage.setItem("userName",userData.value);
    }
    //获取数据
    document.getElementById("getData").onclick=function(){
        var value=window.sessionStorage.getItem("userName");
        alert(value);
    }

localStorage

localStorage :存储数据到本地，存储的容量20mb左右。

存储的内容大概20mb
不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据
永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除，必须手动清除removeItem

setItem(key , value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容

var userData=document.getElementById("userName");
    //存储数据
    document.getElementById("setData").onclick=function(){
        window.localStorage.setItem("userName",userData.value);
    }
    //获取数据
    document.getElementById("getData").onclick=function(){
        var value=window.localStorage.getItem("userName");
        alert(value);
    }
    //删除数据
    document.getElementById("removeData").onclick=function(){
        window.localStorage.removeItem("userName");
    }

应用缓存

ctrl+F5强制刷新

chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

概念：使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本

优势：

可配置需要缓存的资源
网络无连接应用仍可用
本地读取缓存资源，提升访问速度，增强用户体验
减少请求，缓解服务器负担

Cache Manifest 基础：

如需启用应用程序缓存，请在文档的 <html>标签中包含 manifest 属性

<!DOCTYPE HTML>
<html manifest="demo.appcache"></html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置，输入inetmgr->MIME类型->添加

在这里插入图片描述

Manifest 文件：

概念：manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）
manifest 文件可分为三个部分
- CACHE MANIFEST （第一句必须）
- CACHE 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK 需要与服务器的连接，且不会被缓存
- FALLBACK 规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST 
#首次下载后进行缓存;*:代表所有文件
CACHE：
/theme.css
/logo.gif
/main.js

#与服务器的连接，且不会被缓存
NETWORK:
login.asp

#无法访问时的回退页面;/:代表所有文件
FALLBACK:
/html5/ /404.html

其它：
1. CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
2. 可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
3. #表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
更新缓存：

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件。为了确保浏览器更新缓存，也需要更新 manifest 文件，也就意味着一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存

说明：更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

案例：自定义播放器

各种浏览器默认播放器都不一样

多媒体：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

常用方法：load() 加载、 play() 播放、 pause() 暂停

Jq没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法—dom元素

常用属性：

currentTime 视频播放的当前进度、
duration:视频的总时间 100000/60
paused:视频播放的状态.

常用事件：

oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
ontimeupdate:通过该事件来报告当前的播放进度.
onended:播放完时触发—重置

三：多媒体案例：自定义视频播放器

页面结构：

<h3 class="playerTitle">视频播放器</h3> 
<div class="player">     
 <video src="../mp3/test.mp4"></video>     
  <div class="controls">        
   <a href="javascript:;" class="switch fa fa-pause"></a>    <a href="javascript:;" class="expand fa fa-expand"></a>    <div class="progress">            
        <div class="bar"></div>            
        <div class="loaded"></div>             
        <div class="elapse"></div>         
   </div>         
   <div class="time">             
        <span class="currentTime">00:00:00</span>
        \             
        <span class="totalTime">00:00:00</span>         
   </div>     
 </div> 
</div>

/*获取到播放器*/
    var video=$("video")[0];//jq转成dome元素
    /*暂停-播放切换*/
    $(".switch").click(function(){
        //1.切换样式，从暂停切换到播放，或者从播放切换到暂停
        $(this).toggleClass("fa-pause fa-play");
        //2.修改播放器的状态
        if(video.paused){
            video.play();
        }
        else{
            video.pause();
        }
    });
    /*全屏*/
    $(".expand").click(function(){
        video.webkitRequestFullScreen();
    });
    /*当可以开始播放的时候触发oncanplay*/
    video.oncanplay=function(){
        //延迟
        setTimeout(function(){
            video.style.display="block";
            //1.获取视频的总时长,结果以秒作为单位
            var duration=video.duration;
            //2.计算 时  分  秒
            var hour= Math.floor(duration/3600);
            var menite= Math.floor(duration%3600/60);
            var second=Math.floor(duration%60);
            //3.将时分秒信息填充到总时长span中
            //3.1 设置时分秒的格式
            hour=hour<10?"0"+hour:hour;
            menite=menite<10?"0"+menite:menite;
            second=second<10?"0"+second:second;
            //3.2填充
           $(".totalTime").html(hour+":"+menite+":"+second);
        },2000);
    }
    /*当视频在播放的时候，会触发下下面的方法ontimeupdate*/
    video.ontimeupdate=function(){
        //1.获取当前已经播放过了时间
        var elapseTime=video.currentTime;
        //2.获取已过时间的时分秒
        var hour= Math.floor(elapseTime/3600);
        var menite= Math.floor(elapseTime%3600/60);
        var second=Math.floor(elapseTime%60);
        //3.将时分秒信息填充到当前时长span中
        //3.1 设置时分秒的格式
        hour=hour<10?"0"+hour:hour;
        menite=menite<10?"0"+menite:menite;
        second=second<10?"0"+second:second;
        //3.2填充
        $(".currentTime").html(hour+":"+menite+":"+second);
        //4.设置当前<div class="elapse"></div>的宽度
        var valuePercent=0;
        if(elapseTime>0){
            valuePercent=elapseTime/video.duration*100;
            $(".elapse").css("width",valuePercent+"%");
        }
    }

在这里插入图片描述

furfur-jiang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记

HTML5此篇为H5的学习，如要学习基础HTML→html基础的笔记目录：字符设定常用新标签表单输入类型表单新属性综合案例表单新增的事件多媒体标签传统多媒体embedHS音频audioHS视频videoDOM扩展H5新增接口网络接口全屏接口读取文件拖拽接口地理位置web存储sectionStoragelocalStorage应...
复制链接

扫一扫