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" ο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 自定义 音乐播放器
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
