H5API-SVG、地理定位、多媒体(video、audio)、视频插件、拖放-CSDN博客

H5API-SVG、地理定位、多媒体(video、audio)、视频插件、拖放

5.1 SVG

1、svg和canvas的区别

1. svg绘制的是矢量图(不会失真)， canvas绘制的是位图(会失真)

2. svg使用XML来绘制图片， canvas使用JavaScript来绘制图片

3. svg的兼容性好， canvas需要兼容H5的浏览器

4. svg可以给每个图形绑定事件， canvas不可以

2、svg的应用领域

图标
地图

3、绘制图形

矩形
圆形
多边形
路径
.....

例子：矩形、圆形 1.html <body> <svg width="600" height="500"> <rect x="100" y="100" width="300" height="150" fill="red" stroke="green" stroke-width="10" id="myrect"/>

  			<circle cx="400" cy="400" r="100" stroke="purple" fill="yellow" stroke-width="10" />
  		</svg>
  	</body>
  	<script>
  		var rect = document.getElementById("myrect");
  		console.log(rect);

  		// 矩形绑定事件
  		rect.onclick = function(){
  			alert("啊")
  		}
  	</script>

###4、在HTML中使用SVG

<embed src="" type="image/xml+svg">
<object data="" type="image/xml+svg"></object>
<iframe src=""></iframe>
直接在html中写svg

例子： 1s.html <body>  <embed src="./svgImages/clock.svg" type="image/svg+xml" style="width:32px">

  		<!-- 方法二：object双标签引入 -->
  		<object data="./svgImages/shake.svg" type="image/svg+xml" style="width:32px"></object>

  		<!-- 方法三：iframe双标签引入 -->
  		<iframe src="./svgImages/video.svg" frameborder="0" scrolling="no" marginwidth="10" marginheight="10"></iframe>

  		<!-- 方法四：直接导入图片 -->
  		<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1496824766765" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1280" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.3 515.9m-447.1 0a447.1 447.1 0 1 0 894.2 0 447.1 447.1 0 1 0-894.2 0Z" fill="#75EAE4" p-id="1281"></path><path d="M511.3 983c-63.1 0-124.2-12.4-181.8-36.7-55.6-23.5-105.6-57.2-148.5-100.1s-76.6-92.9-100.1-148.5c-24.4-57.6-36.7-118.8-36.7-181.8 0-63.1 511.3 88.7z" fill="#05C4CE" p-id="1282"></path><path d="M102.5 490a428 421.3 0 1 0 856 0 428 421.3 0 1 0-856 0Z" fill="#FFFFFF" p-id="1283"></path><path d="M351.1 230.7a44" fill="#05C4CE" p-id="1284"></path><path d="M583.5 230.7a44 49.3 0 1 0 88 0 44 49.3 0 1 0-88 0Z" fill="#05C4CE" p-id="1285"></path><path d="M226.644273 345.354548a28.2 53.7 87.699 1 0 107.313403-4.312027 28.2 53.7 87.699 1 0-107.313403 4.312027Z" fill="#75EAE4" p-id="1286"></path><path d="M688.742981 326.756181a28.2 53.7 87.699 1 0 107.313402-4.312028 28.2 53.7 87.699 1 0-107.313402 4.312028Z" fill="#75EAE4" p-id="1287"></path><path d="M511.3 983c-63.1  100 569 88.7 511.3 88.7z" fill="#05C4CE" p-id="1288"></path><path d="M160.3  2.6 6.8 8.6 4.2 13.5L290.4 520.5c-1.8 3.4-5.3 5.4-8.9 5.4z" fill="#05C4CE" p-id="1289"></path><path d="M597.1 525.9c-1.6 0-3.1-0.4-4.6-1.1-4.9-2.6-6.8-8.6-4.2-13.5L693 5.4-8.9 5.4z" fill="#05C4CE" p-id="1290"></path></svg>
  	</body>

##5.2 地理定位 navigator.geolocation ###1、获取地理位置： getCurrentPosition(successCallback, errorCallback, options)

###2、监听当前地理位置： watchPosition(successCallback, errorCallback, options)

###3、结束监听： clearWatch()

###4、successPositon 定位成功回调返回的对象

coords 坐标
- latitude 纬度
- longitude 经度
- altitude 海拔高度
- speed 速度
- heading 前进方向
- accuracy 坐标经度
- altitudeAccuracy 海拔精度
timestamp 时间戳

###5、errorPosition 定位失败回调返回的对象

code
- 1 是用户未授权
- 2 是不能确定位置
- 3 是超时
message 错误信息

###6、options 选项

timeout 超时时间
enableHighAccuracy 是否得到最佳效果 true/false
maximumAge 是否接受的缓存时间

###7、注意

chrome，filefox，微信等浏览器要成功获取地理位置，网页必须使用 https 协议打开

###8、例子： 2.html <body> <div id="box"></div> <script> // 代理（版本） console.log(navigator.userAgent)

			// 地理位置
			console.log(navigator.geolocation)

			// 获取地理定位
			// 注意：谷歌出不来，用其他浏览器查看
			navigator.geolocation.getCurrentPosition(function(position){

				// 获取纬度坐标
					// latitude	纬度
					// coords	坐标
				var latitude = position.coords.latitude;

				// 获取经度坐标
					// longitude	经度
				var longitude = position.coords.longitude;

				// 获取高度坐标
					// altitude	海拔高度
				var altitude = position.coords.altitude

				// 输出信息
					// 获取信息
					// 将信息在div中输出

				var message = "您的地理位置：<br>"
				message += "纬度："	+ latitude + "<br>"
				message += "经度 : "+longitude+"<br>";
				message += "海拔 : "+altitude+"<br>";

				document.getElementById("box").innerHTML = message;
			},function(error){
				console.log("地理位置获取失败：" + error.code + " : " + error.message);
			},{
				enableHighAccuracy:true,	//是否得到最佳效果 true/false
				timeout:10000		//超时时间
			})
		</script>
	</body>

##5.3 多媒体 ###1、多媒体标签

<video> 定义音乐或音频流
<audio> 定义视频或视频流
<source> 媒介元素（比如 <video> 和 <audio>）定义媒介资源 * 允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
<track> video 元素之类的媒介规定外部文本轨道 * 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的

###2、音频、视频 DOM 属性

volume 设置或返回音频/视频的音量
muted 设置或返回音频/视频是否静音
audioTracks 返回表示可用音频轨道的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频/视频
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
duration 返回当前音频/视频的长度（以秒计）
ended 返回音频/视频的播放是否已结束
error 返回表示音频/视频错误状态的 MediaError 对象
loop 设置或返回音频/视频是否应在结束时重新播放
mediaGroup 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
played 返回表示音频/视频已播放部分的 TimeRanges 对象
preload 设置或返回音频/视频是否应该在页面加载后进行加载
readyState 返回音频/视频当前的就绪状态
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
src 设置或返回音频/视频元素的当前来源
startDate 返回表示当前时间偏移的 Date 对象
textTracks 返回表示可用文本轨道的 TextTrackList 对象
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象

###3、音频、视频 DOM 方法

play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素

###4、音频、视频 DOM 事件

onplay
onpause
....

###5、视频地址：

###6、例子：视频播放 3.html <body>  <video src="http://movie.ks.js.cn/flv/other/1_0.mp4" id="myvideo"></video> <br>

		<button onclick="play()">播放</button>
		<button onclick="pause()">暂停</button>
		<button onclick="addVolume()">音量+</button>
		<button onclick="jianVolume()">音量-</button>
		
		<script>
			var video = document.getElementById("myvideo");

			// 播放
			function play(){
				video.play();
			}

			// 播放事件
			video.onplay = function(){
				alert("啊。我播放了")
			}

			// 暂停
			function pause(){
				video.pause();
			}

			// 暂停事件
			video.onpause = function(){
				alert("啊。我被暂停了")
			}

			// 音量+
			function addVolume(){
				if(video.volume < 1){
					video.volume += 0.1;
				}
			}

			// 音量-
			function jianVolume(){
				if(video.volume >= 0.1){
					video.volume -= 0.1;
				}else{
					return;
				}
			}		
		</script>
	</body>

###7、视频插件

ckplayer falsy/h5
jplayer falsh/h5
flowplayer falsh/h5
video.js h5
flv.js flash
例子：ckplayer插件 4.html <body> <div id="a1"></div> <script src="./ckplayer.js"></script> <script type="text/javascript"> var flashvars = { f: 'http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', c: 0, p: 2, b: 0, i: '/static/images/letitgo.jpg', subtitle_cn:'/ckplayer/subtitle/cn.srt', subtitle_en:'/ckplayer/subtitle/en.srt', my_url: encodeURIComponent(window.location.href) }; var video = ['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']; CKobject.embed('/ckplayer/6.6/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '100%', false, flashvars, video); </script> </body>

##5.4 拖拽 API ###1、属性

draggable 控制元素是否可以被拖动所有的元素都有 true/false

###2、事件 ####1. 绑定目标元素：

dragenter 拖拽元素进入目标元素用于目标元素的样式
dragleave 拖拽元素离开目标元素用于目标元素的样式
dragover 拖拽元素放置在目标元素；一般需要组织默认事件 event.preventDefault();
drop 拖拽元素放置在目标元素上时触发
- 使用drop需要dragover组织默认事件

####2. 绑定拖拽元素：

dragstart 拖拽开始
dragend 拖拽结束
drag 拖拽过程中一直触发

###3、dragEvent

dataTranfer 用于不同event之间的数据交换
- setData（key,value）
- getData(key)

###4、例子：拖拽元素并放到目标元素 5.html <head> <meta charset="UTF-8"> <title>拖放</title> <style> #drag-box{ width:100px; height:100px; border:1px solid #ccc; background:orange; cursor:pointer; } #box{ margin:20px auto; width:1200px; border:2px solid #aaa; background:#eee; height:300px; padding:10px; } #box.over{ border:2px dashed #aaa; transform: scale(0.9, 0.9); } </style> </head> <body> <div id="box"></div> <div id="drag-box" draggable="true" οndragstart="dragstart(this,event)" οndragend="dragend()" οndrag="drag()"></div>

		<br>

		<img src="https://img6.bdstatic.com/img/image/pcindex/xiaoqingxinxinxin.jpg" width="100" ondragstart="dragstart(this,event)" id="myimg"  ondragend="dragend()" ondrag="drag()">

		<script>
			// 获取目标元素
			var box = document.getElementById("box");

			// 拖拽开始
			function dragstart(ele,en){
				//把id存入dataTransfer
				en.dataTransfer.setData("id",ele.id);
			}

			// 拖拽结束
			function dragend(){
				console.log("dragend");
			}

			// 拖拽过程中一直触发
			function drag(){
				console.log("drag")
			}

			// 拖拽元素，进入目标元素
			box.addEventListener("dragenter",function(){
				this.classList.add("over")
			})

			// 拖拽元素，离开目标元素
			box.addEventListener("dragleave",function(){
				this.classList.remove("over")
			})

			// 拖拽元素，放置在目标元素中
			box.addEventListener("dragover",function(en){
				// console.log("拖拽元素，在目标元素中移动")

				en.preventDefault();	//阻止默认事件
			})

			// 拖拽元素，放在目标元素
			box.addEventListener("drop",function(en){
				// 取出id
				var id = en.dataTransfer.getData("id");

				// 将拖拽元素添加到目标元素
				this.appendChild(document.getElementById(id));

				this.classList.remove("over");
			})
		</script>
	</body>

##作业 ###1、使用video/audio dom API 自定义音乐播放器

转载于:https://my.oschina.net/u/3502365/blog/1154605