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

原创
2017/07/04 22:37
阅读数 98

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单标签引入 --> <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" ondragstart="dragstart(this,event)" ondragend="dragend()" ondrag="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 自定义 音乐播放器

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部