h5中video详解和其它新标签，css自定义常量

1、video元素：用于媒体播放的元素

<video src="视频地址"  width="320" height="240" controls="controls">   // control提供播放、暂停、音量的控件，加入autoplay="autoplay"加载完毕，立即播放
Your browser does not support the video tag.                          // 当视频不能播放时，显示
</video>

或使用source来链接视频文件，可以有多个，但浏览器只使用第一个可识别的格式

<video width="320" height="240" controls="controls">
  <source src="地址1" type="video/ogg">
  <source src="地址2" type="video/mp4">
Your browser does not support the video tag.
</video>

详细使用

（1）controlslist的使用：nodownload不能下载，nofullscreen全屏不能用

<video src="./1.mp4" width="400" height="250" controls="controls" controlslist="nodownload nofullscreen"></video>

（2）贴图poster：默认显示的视频是第一帧，加了poster会显示加的图片

<video src="./1.mp4" width="400" height="250" controls="controls" poster="./1.png"></video>

（3）autoplay：自动播放，muted：静音，在非静音的情况下不允许自动播放

<video src="./1.mp4" width="400" height="250" controls="controls" autoplay muted poster="./1.png"></video>

（4）循环播放：loop

<video src="./1.mp4" width="400" height="250" controls="controls" autoplay muted loop poster="./1.png"></video>

（5）预加载：preload，进度条会有部分缓存，不同浏览器效果不一样

<video src="./1.mp4" width="400" height="250" controls="controls" preload poster="./1.png"></video>

（6）控制音量，在0-1之间，标签中写volume不起作用，要在js中

<video src="./1.mp4" id="volume" width="400" height="250" controls="controls" poster="./1.png"></video>
<script type="text/javascript">
	var v = document.querySelector('#volume');
	v.volume = 0.5;
</script>

（7）控制时间

<video src="./1.mp4" id="time" width="400" height="250" controls="controls" poster="./1.png"></video>
<script type="text/javascript">
	var t = document.querySelector('#time');
	console.log(t.currentTime);                     // 获取时间
	t.currentTime = 6;   // 单位：秒，操作时间
</script>

（8）备用地址切换

<video id="time" width="400" height="250" controls="controls">
	<source src="./1.mp4" type="video/mp4">
	<source src="./2.mp4" type="video/mp4">
</video>
<script type="text/javascript">
	var t = document.querySelector('#time');
	setTimeout(function () {
		console.log(t.currentSrc);      // 使用了source不能使用t.src获取地址，只能使用currentSrc
	}, 1000);
</script>

（9）视频的加载事件

<video src="./1.mp4" id="v" width="400" height="250" controls="controls"></video>
<script type="text/javascript">
	var v = document.querySelector('#v');
	// 开始加载，初始的时候视频总时长为NAN
	v.addEventListener('loadstart', function () {
		console.log('loadstart', v.duration);
	});
	// 视频总时长变化时，当源数据下载好时得到大小，但优先级比源数据加载好要高
	v.addEventListener('durationchange', function () {
		console.log('duration', v.duration);
	});
	// 源数据加载好后触发，优先级低于durationchange
	v.addEventListener('loadedmetadata', function () {
		console.log('loadedmetadata');
	});
	// 源数据下载好，但没有足够的数据播放下一帧，会触发
	v.addEventListener('loadeddata', function () {
		console.log('loadeddata');
	});
	// 当下载的时候触发
	v.addEventListener('progress', function () {
		console.log('progress');
	});
	// 是否可以播放
	v.addEventListener('canplay', function () {
		console.log('canplay');
	});
	// 是否可以流畅的播放
	v.addEventListener('canplaythrough', function () {
		console.log('canplaythrough');
	});
</script>

结果：

loadstart NaN
index.html:51 duration 10.389333
index.html:55 loadedmetadata
index.html:63 progress
index.html:59 loadeddata
index.html:67 canplay
index.html:71 canplaythrough

（10）其他操作事件

// 当点击进度条的时候
	v.addEventListener('seeking', function () {
		console.log('seeking');
	});
	// 当seeking完成的时候
	v.addEventListener('seeked', function () {
		console.log('seeked');
	});
	// 当视频没有解码完全的时候（当拉进度条视频还没好）
	v.addEventListener('waiting', function () {
		console.log('waiting');
	});
	// 视频播放中的状态
	v.addEventListener('playing', function () {
		console.log('playing');
	});
	// 当播放时间（进度条）改变的时候，实时
	v.addEventListener('timeupdate', function () {
		console.log('timeupdate');
	});
	// 播放结束
	v.addEventListener('ended', function () {
		console.log('ended');
	});
	// 播放失败时
	v.addEventListener('error', function () {
		console.log('error');
	});

2、audio元素：用于音频播放的元素

<audio src="音频地址" controls="controls">           // control提供播放、暂停、音量的控件，加入autoplay="autoplay"加载完毕，立即播放
Your browser does not support the audio element.    // 不能播放时显示
</audio>

同样可以使用source来链接，

<audio controls="controls">
  <source src="地址1" type="audio/ogg">
  <source src="地址2" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

3、拖放

（1）给要拖拽的元素加draggable="true"

（2）开始拖拽时，给拖拽元素加ondragstart事件，用来获取拖拽元素的id

（3）要放到何处，给放的位置加ondragover事件，因为默认不允许放置其它元素，所以要preventDefault

（4）进行放置，给放的位置加ondrop事件，得到拖拽元素的id，并appendChild

<div id="div1" οndragοver="dragOver(event)" οndrοp="drop(event)"></div>
	<img src="./music.png" id="img1" draggable="true" οndragstart="dragStart(event)">

	<script>
		function dragStart (ev)                                     // 开始
		{
			ev.dataTransfer.setData("text", ev.target.id);      // 设置text用来存储拖拽元素的id
		}

		function dragOver (ev)                                      // 放置的位置
		{
			ev.preventDefault();
		}

		function drop (ev)                                          // 放下时
		{
			ev.preventDefault();
			var data = ev.dataTransfer.getData("text");
			ev.target.appendChild(document.getElementById(data));
		}
	</script>

（5）来回拖放，只要多加几个带相同事件的放的位置就行了

<div id="div1" οndragοver="dragOver(event)" οndrοp="drop(event)"></div>
	<img src="./music.png" id="img1" draggable="true" οndragstart="dragStart(event)">
	<div id="div2" οndragοver="dragOver(event)" οndrοp="drop(event)"></div>

4、web存储

（1）localStorage：存储数据没有时间限制，即便关闭浏览器

<div id="storage"></div>

	<script>
		localStorage.setItem("lastname", 'xueer');
		var storage = document.querySelector("#storage");
		storage.innerHTML = localStorage.getItem("lastname");
	</script>

可以直接localStorage.变量，而不用写setItem

<div id="number"></div>

	<script>
		var num = document.querySelector('#number');
		if (localStorage.count) {
			localStorage.count = Number(localStorage.count) + 1;     // 计数，刷新页面，关闭浏览器，都会加1
		} else {
			localStorage.count = 1;
		}
		num.innerHTML = localStorage.count;
	</script>

（2）sessionStorage：用法和localStorage类似，但不同点在于，sessionStorage关闭浏览器时会重置，而localStorage则不会

5、web worker：后台运行的js脚本，不会影响页面的性能

<div id="count"></div>
	<br/>
	<button οnclick="startWorker()">start worker</button>
	<button οnclick="stopWorker()">stop worker</button>

	<script>
		var w;
		function startWorker ()
		{
			w = new Worker('worker.js');          // 创建web worker对象
			w.onmessage = function (event) {      // 通信，接收消息
				document.querySelector('#count').innerHTML = event.data;
			}
		}
		function stopWorker ()
		{
			w.terminate();           // 终止web worker
		}
	</script>

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);          // 通信，传消息              
setTimeout("timedCount()",500);
}

timedCount();

注：上面的HTML文件要 在服务器上打开，不能直接用文件打开，因为： Chrome从本地文件运行脚本时不允许加载web worker，会报错

6、css3边框

（1）border-radius：创建圆角边框

（2）box-shadow：添加阴影 水平px 垂直px 模糊距离 颜色

（3）border-image：边框为图片

7、css3背景

（1）background-size：宽、高，背景大小

（2）background-origin：放置的位置content-box、padding-box、border-box

8、css3文本

（1）text-shadow：文字阴影，和box-shadow用法相似

（2）text-overflow：文字溢出时，ellipsis以省略号代替

（3）work-wrap:break-work 当单词太长，强制换行，会对单词进行拆分

9、css自定义变量

:root {                                         // 定义的全局变量，在其中定义的变量其他选择器都可以用
	--main-bg-color: red;                   // 自定义的变量名以--开头
}
h3 {                                            // 定义的局部变量，只能h3使用
	--h-font-size: 10px;
}
h3 {
	background-color: var(--main-bg-color);    // 使用变量时，用var(变量名)
	font-size: var(--h-font-size);
}