您的位置：首页 > Web前端 > HTML5

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

2017-07-04 00:00 162 查看

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、视频地址：

http://movie.ks.js.cn/flv/other/1_0.mp4

http://movie.ks.js.cn/flv/other/1_0.flv

###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 自定义音乐播放器

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航