新增标签介绍
1、音视频
video标签
在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。H5中video标签可以向使用img显示图片一样简单去播放视频。
- 属性：
- src：需要引入的视频资源地址
- controls：是否显示视频的控件，比如播放、暂停、进度条、音量、全屏
- autoplay：在视频加载完成后立即播放，最好和muted搭配使用，否则可能导致不能播放
- muted：是否静音
- loop：是否循环播放
- volume：控制视频音量，取值范围0~1
- duration：视频总时长
- currentTime：播放进度
- playbackRate：播放速度
- paused：当前视频的状态是否为暂停，是则为true
- width：视频宽度（有默认值）
- height：视频高度（有默认值）
- 方法：
- play()：播放
- pause()：暂停
- load()：重新加载当前视频
例如：播放视频
<!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>测试视频video标签</title>
</head>
<body>
<!-- 引入视频文件 -->
<video src="../FILE/五月天 - 后来的我们.mp4" controls></video>
<!-- 多个按钮控制视频 -->
<div class="btns">
<button>播放</button>
<button>暂停</button>
<button>快进</button>
<button>快退</button>
<button>快倍速</button>
<button>慢倍速</button>
</div>
<!-- /多个按钮控制视频 -->
<!-- 单个按钮控制视频播放与暂停、获得播放百分比、显示播放进度 -->
<div class="play">
<button id="play">播放</button>
<button id="progress">百分比</button>
</div>
<div class="showProgress"></div>
<!-- /单个按钮控制视频播放与暂停、获得播放百分比、显示播放进度 -->
<script>
var video = document.getElementsByTagName("video")[0];
// 事件代理，由父元素来执行子元素被点击后的操作
var btns = document.getElementsByClassName("btns")[0];
btns.onclick = function(){
// event.target获取触发事件的元素，innerText获取元素文本内容
console.log(event.target.innerText);
// 根据文本内容来决定执行的事件
var text = event.target.innerText;
if(text == "播放"){
video.play();
}
if(text == "暂停"){
video.pause();
}
if(text == "快进"){
video.currentTime += 10;
video.play();
}
if(text == "快退"){
video.currentTime -= 10;
video.play();
}
if(text == "快倍速"){
console.log(video.playbackRate); // 默认为1
video.playbackRate *= 1.2;
video.play();
}
if(text == "慢倍速"){
console.log(video.playbackRate); // 默认为1
video.playbackRate *= 0.8;
video.play();
}
}
// 同一个按钮实现播放与暂停
var play_btn = document.getElementById("play");
play_btn.onclick = function(){
if(video.paused){
video.play();
play_btn.innerText = "暂停";
}else{
video.pause();
play_btn.innerText = "播放"
}
}
// 获取播放的百分比
var progress = document.getElementById("progress");
progress.onclick = function(){
var total = video.duration; // 获取视频总时长
console.log(total);
// 每隔一段时间获取播放百分比
var id = setInterval(function getTime(){
var current = video.currentTime; // 获取视频当前播放位置（时间）
console.log(current);
var res = (current/total*100).toFixed(2) + "%"; // toFixed保证小数位为两位
console.log(res); // 视频当前播放进度
var showProgress = document.getElementsByClassName("showProgress")[0];
showProgress.innerText = res;
if(current === total){
clearInterval(id);
}
},1000);
}
</script>
</body>
</html>
由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的，这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式，video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
需要注意的是：
（1）当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
（2）此外，在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现，如下：
<video autoplay="autoplay" controls="controls">
<source src="images/sb1.webm" type="video/webm"></source>
<source src="images/sb1.mp4" type="video/mp4"></source>
<source src="images/sb1.ogg" type="video/ogg"></source>
</video>
audio标签
audio元素和video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致，具体看video的属性和方法就行
- 自动播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体元素标签基本使用</title>
</head>
<body>
<!--
视频 video
autoplay 自动播放
controls 控制条
muted 静音
-->
<video src="../FILE/五月天 - 后来的我们.mp4" width="1000px" controls autoplay muted></video>
<!--
音频 audio
autoplay 自动播放
controls 控制条
-->
<audio src="../FILE/dylanf - 卡农（经典钢琴版）.mp3" autoplay controls></audio>
</body>
</html>
- 按钮控制全屏与退出全屏、方向键控制快进快退与音量加减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结合Jquery实现视频播放器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="../jquery-3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<video src="../FILE/五月天 - 后来的我们.mp4" width="800px" controls autoplay muted></video>
</div>
<div class="btns">
<button>播放</button>
<button>暂停</button>
<button id="toggle">切换播放/暂停</button>
<button>快进</button>
<button>快退</button>
<button>2倍速</button>
<button>0.5倍速</button>
<button>正常倍速</button>
<button>音量+</button>
<button>音量-</button>
<button>全屏</button>
<button>退出全屏</button>
</div>
<script>
$(function () {
// 获取视频节点
var video = $("video")[0];
// 切换播放/暂停
var toggleBtn = $("#toggle");
toggleBtn.click(function () {
if (video.paused) {
video.play();
$(this).text("暂停视频");
} else {
video.pause();
$(this).text("播放视频");
}
})
// 获取button节点，绑定事件，使用事件委托
$(".btns").click(function (event) {
// 获取按钮的标题（名字）
var text = $(event.target).text();
// 判断点的是哪个按钮
if (text === "播放") {
video.play();
}
if (text === "暂停") {
video.pause();
}
if (text === "快进") {
video.currentTime += 10;
}
if (text === "快退") {
video.currentTime -= 10;
}
if (text === "2倍速") {
video.playbackRate = 2;
}
if (text === "0.5倍速") {
video.playbackRate = 0.5;
}
if (text === "正常倍速") {
video.playbackRate = 1;
}
if (text === "音量+") {
if (video.volume >= 1) {
alert("音量已经最大，请注意保护耳朵");
} else {
video.volume += 0.1;
}
}
if (text === "音量-") {
if (video.volume < 0.1) {
alert("音量已经最小");
} else {
video.volume -= 0.1;
}
}
// 按钮控制全屏与退出全屏（不同浏览器对这方面的支持不同）
if (text === "全屏") {
var docElm = document.documentElement;
// W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
// FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
// Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
// IE11
else if (elem.msRequestFullScreen) {
elem.msRequestFullScreen();
}
$(video).css({
width: window.screen.width,
height: window.screen.height,
position: "absolute",
"z-index": "-100",
left: "0",
top: "0"
});
}
if (text === "退出全屏") {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
$(video).css({
width: '800px',
height: '500px',
position: 'absolute',
left: '20px',
top: '40px'
});
}
})
// 方向键控制快进快退，音量加减
document.onkeydown = function (event) {
// 左37 上38 右39 下40
console.log(event.keyCode);
if (event.keyCode === 37) {
// 快退 通过控制currentTime来实现快退
video.currentTime -= 10
}
if (event.keyCode === 38) {
// 音量+ volume 音量，取值为0~1
if (video.volume >= 1) {
alert('音量已经最大')
} else {
video.volume += 0.1
}
}
if (event.keyCode === 39) {
// 快进 通过控制currentTime来实现快进
video.currentTime += 10
}
if (event.keyCode === 40) {
// 音量- volume 音量，取值为0~1
if (video.volume < 0.1) {
alert('音量已经最小')
} else {
video.volume -= 0.1
}
}
}
})
</script>
</body>
</html>
和video标签一样，有第二种格式。
<audio>
<source src="" type="">
<source src="" type="">
</audio>
注意点:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样，不过有3个属性不能用, height/width/poster
2、拖拽
1、在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。
拖动事件：dragstart、drag、dragend
放置事件：dragenter、dragover、drop
拖拽事件流：
当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发
dragstart->drag->dragenter->dragover->drop->dragend
2、在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData
设置元素为可拖放true
首先，为了使元素可拖动，把元素中的draggable 属性设置为 true ：
<img draggable="true" />
拖动什么 - ondragstart 和 setData()
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop和 getData()
当放置被拖数据时，会发生 drop 事件。
在下面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释：
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id (“drag1”)
- 把被拖元素追加到放置元素（目标元素）中
拖拽例题
单个目标的拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽的基本用法</title>
<style>
.parent {
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="parent"></div>
<!-- draggable="true" 可以拖放 -->
<div draggable="true" class="child" id="one">我是拖放元素</div>
<script>
window.onload = function () {
// 获取parent DOM节点 目标元素
var parent = document.getElementsByClassName('parent')[0]
// 获取child DOM节点 拖放元素
var child = document.getElementsByClassName('child')[0]
// 拖放事件
// 拖放事件开始 绑定给拖放元素 开始拖放时,记录拖放的元素并且保存起来，在放置的时候获取到保存的拖放元素，放置到目标元素内
child.ondragstart = function (event) {
console.log('ondragstart');
// 拖放数据传输对象
var dt = event.dataTransfer
// 添加数据到数据传输对象里， dataTransfer.setData(key,val); 在dataTransfer里设置值，在dragstart中赋值
dt.setData('id', this.id)
// 保存完毕后 在parent.ondrop中进行获取和使用
}
// 拖放事件进行中
child.ondrag = function () {
console.log('ondrag');
}
// 拖放事件结束
child.ondragend = function () {
console.log('ondragend');
}
// 放置事件
// 进入目标事件 dragenter
parent.ondragenter = function () {
console.log('ondragenter');
}
// 在目标元素内移动 dragover
parent.ondragover = function (event) {
console.log('ondragover');
// 阻止事件的默认行为
event.preventDefault(); //重要，这个一定要有，不然drop没法触发
}
// 将拖放元素放置到目标元素内时触发 drop
parent.ondrop = function (event) {
console.log('ondrop');
// 获取数据传输对象
var dt = event.dataTransfer;
// 通过getData获取到id值
var id = dt.getData('id');
// 通过id获取DOM节点
var dom = document.getElementById(id);
// 追加到parent元素内
this.appendChild(dom);
}
}
</script>
</body>
</html>
多个目标的拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多个元素拖拽</title>
<style>
body {
height: 500px;
border: 1px solid green;
}
.parent {
height: 130px;
border: 1px solid red;
margin: 10px;
}
.child {
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<!-- 需求 可以将五个child拖放到两个parent中 也可以将parent中的child再拖回body中 -->
<!-- 目标元素 -->
<div class="parent"></div>
<div class="parent"></div>
<!-- 拖放元素 -->
<div draggable="true" class="child" id="one">1</div>
<div draggable="true" class="child" id="two">2</div>
<div draggable="true" class="child" id="three">3</div>
<div draggable="true" class="child" id="four">4</div>
<div draggable="true" class="child" id="five">5</div>
<script>
window.onload = function () {
// 2.获取拖放元素
var children = document.getElementsByClassName('child');
// 将children转换为数据
children = Array.from(children);
// 3.获取目标元素
var parents = document.getElementsByClassName('parent');
// 将parents转换为数组
parents = Array.from(parents);
// 4.绑定事件
// 绑定拖放元素事件 需要拿到一个一个的拖放元素去绑定
children.forEach(function (item) {
// item ==> 每一个拖放元素
item.ondragstart = ds;
})
// 绑定放置元素事件 需要拿到一个一个的放置元素
parents.forEach(function (item) {
// item ==> 目标元素
item.ondragover = dover;
item.ondrop = dr;
})
// 给body也绑定事件 当我们要在parent里向外拖放child时 我们需要把body也设置为目标元素
document.body.ondragover = dover;
document.body.ondrop = dr;
// 1.事件处理函数的声明
// dragstart 拖放开始事件
function ds(event) {
// 获取传输对象
var dt = event.dataTransfer;
// 设置setData
dt.setData('id', this.id);
// 6.设置拖放过程中的鼠标样式
dt.effectAllowed = 'copy';
}
// dragover 在目标元素内移动
function dover(event) {
// 阻止事件的默认行为
event.preventDefault();
// dropEffect 属性指定了用户完成拖放操作后的行为
event.dataTransfer.dropEffect = 'copy';
/*
'none'：不允许在目标上释放数据。
'move'：源节点的数据应该被移动到目标位置。
'copy'：源节点的数据应该被复制到目标位置，保留原始数据。
'link'：在目标上创建源节点数据的链接。
*/
}
// drop 将拖放元素放置到目标元素内时触发
function dr(event) {
// 获取传输对象
var dt = event.dataTransfer;
// 通过getData 拿到id
var id = dt.getData('id');
// 通过id获取DOM节点
var dom = document.getElementById(id);
// 追加到parent元素内
this.appendChild(dom);
// 阻止事件冒泡
event.stopPropagation();
// 阻止事件的默认行为 防止拖拽时出现多个tab
event.preventDefault();
}
}
</script>
</body>
</html>
4663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
