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);
}


  • 2
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值