前端基础笔记

【javascript】html5脚本编程

2018-01-04  本文已影响0人  shanruopeng

1、跨文档消息传递

//注意：所有支持XDM 的浏览器也支持iframe 的contentWindow 属性
var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A secret", "http://www.wrox.com");

//如果来源匹配，消息会传递到内嵌框架中；否则，postMessage()什么也不做。

EventUtil.addHandler(window, "message", function(event){
    //确保发送消息的域是已知的域
    if (event.origin == "http://www.wrox.com"){
        //处理接收到的数据
        processMessage(event.data);
        //可选：向来源窗口发送回执
        event.source.postMessage("Received!", "http://p2p.wrox.com");
    }
});

2、原生拖放

2.1 拖放事件

2.2 自定义放置目标


var droptarget = document.getElementById("droptarget");
EventUtil.addHandler(droptarget, "dragover", function(event){
    EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "dragenter", function(event){
    EventUtil.preventDefault(event);
});

EventUtil.addHandler(droptarget, "drop", function(event){
    EventUtil.preventDefault(event);
});

2.3 dataTransfer 对象

//设置和接收文本数据
event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");
//设置和接收URL
event.dataTransfer.setData("URL", "http://www.wrox.com/");
var url = event.dataTransfer.getData("URL");

var dataTransfer = event.dataTransfer;
//读取URL
var url = dataTransfer.getData("url") ||dataTransfer.getData("text/uri-list");
//读取文本
var text = dataTransfer.getData("Text");

2.4 dropEffect 和 effectAllowed

2.5 可拖动

<!-- 让这个图像不可以拖动 -->
<img src="smile.gif" draggable="false" alt="Smiley face">
<!-- 让这个元素可以拖动 -->
<div draggable="true">...</div>

2.6 其他成员

3、媒体元素

<!-- 嵌入视频 -->
<video src="conference.mpg" id="myVideo">Video player not available.</video>
<!-- 嵌入音频 -->
<audio src="song.mp3" id="myAudio">Audio player not available.</audio>

<!-- 嵌入视频 -->
<video id="myVideo">
<source src="conference.webm" type="video/webm; codecs='vp8, vorbis'">
<source src="conference.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="conference.mpg">
Video player not available.
</video>
<!-- 嵌入音频 -->
<audio id="myAudio">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Audio player not available.
</audio>

3.1 属性

属性 数据类型 说明
autoplay 布尔值 取得或设置autoplay标志
buffered 时间范围 表示已下载的缓冲的时间范围的对象
bufferedBytes 字节范围 表示已下载的缓冲的字节范围的对象
bufferingRate 整数 下载过程中每秒钟平均接收到的位数
bufferingThrottled 布尔值 表示浏览器是否对缓冲进行了节流
controls 布尔值 取得或设置controls属性，用于显示或隐藏浏览器内置的控件
currentLoop 整数 媒体文件已经循环的次数
currentSrc 字符串 当前播放的媒体文件的URL
currentTime 浮点数 已经播放的秒数
defaultPlaybackRate 浮点数 取得或设置默认的播放速度。默认值为1.0秒
duration 浮点数 媒体的总播放时间（秒数）
ended 布尔值 表示媒体文件是否播放完成
loop 布尔值 取得或设置媒体文件在播放完成后是否再从头开始播放
muted 布尔值 取得或设置媒体文件是否静音
networkState 整数 表示当前媒体的网络连接状态：0表示空，1表示正在加载，2表示正在加载元数据，3表示已经加载了第一帧，4表示加载完成
paused 布尔值 表示播放器是否暂停
playbackRate 浮点数 取得或设置当前的播放速度
played 时间范围 到目前为止已经播放的时间范围
readyState 整数 表示媒体是否已经就绪（可以播放了）。0表示数据不可用，1表示可以显示当前帧，2表示可以开始播放，3表示媒体可以从头到尾播放
seekable 时间范围 可以搜索的时间范围
seeking 布尔值 表示播放器是否正移动到媒体文件中的新位置
src 字符串 媒体文件的来源。任何时候都可以重写这个属性
start 浮点数 取得或设置媒体文件中开始播放的位置，以秒表示
totalBytes 整数 当前资源所需的总字节数
videoHeight 整数 返回视频（不一定是元素）的高度。只适用于<video>
videoWidth 整数 返回视频（不一定是元素）的宽度。只适用于<video>
volume 浮点数 取得或设置当前音量，值为0.0到1.0

3.2 事件

事件 触发时机
abort 下载中断
canplay 可以播放时；readyState值为2
canplaythrough 播放可继续，而且应该不会中断；readyState值为3
canshowcurrentframe 当前帧已经下载完成；readyState值为1
dataunavailable 因为没有数据而不能播放；readyState值为0
durationchange duration属性的值改变
emptied 网络连接关闭
empty 发生错误阻止了媒体下载
ended 媒体已播放到末尾，播放停止
error 下载期间发生网络错误
loadeddata 媒体的第一帧已加载完成
loadedmetadata 媒体的元数据已加载完成
loadstart 下载已开始
pause 播放已暂停
play 媒体已接收到指令开始播放
playing 媒体已实际开始播放
progress 正在下载
ratechange 播放媒体的速度改变
seeked 搜索结束
seeking 正移动到新位置
stalled 浏览器尝试下载，但未接收到数据
timeupdate currentTime被以不合理或意外的方式更新
volumechange volume属性值或muted属性值已改变
waiting 播放暂停，等待下载更多数据

3.3 自定义媒体播放器

<div class="mediaplayer">
    <div class="video">
        <video id="player" src="movie.mov" poster="mymovie.jpg"
        width="300" height="200">
        Video player not available.
        </video>
    </div>
    <div class="controls">
        <input type="button" value="Play" id="video-btn">
        <span id="curtime">0</span>/<span id="duration">0</span>
    </div>
</div>

//取得元素的引用
var player = document.getElementById("player"),
btn = document.getElementById("video-btn"),
curtime = document.getElementById("curtime"),
duration = document.getElementById("duration");
//更新播放时间
duration.innerHTML = player.duration;
//为按钮添加事件处理程序
var EventUtil = {
addHander:function(element,type,handler)
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,handler,false);
    }else{
        element["on"+type] = handler;
    }
};
EventUtil.addHandler(btn, "click", function(event){
    if (player.paused){
        player.play();
        btn.value = "Pause";
    } else {
        player.pause();
        btn.value = "Play";
    }
});
//定时更新当前时间
setInterval(function(){
    curtime.innerHTML = player.currentTime;
}, 250);

3.4 检测编码解码支持情况

var audio = document.getElementById("audio-player");
//很可能"maybe"
if (audio.canPlayType("audio/mpeg")){
//进一步处理
}
//可能是"probably"
if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
好好学习
上一篇 下一篇

猜你喜欢

热点阅读