HTML5 拖放视频（音频）存储

最新推荐文章于 2022-07-28 11:21:25 发布

morn夏目

最新推荐文章于 2022-07-28 11:21:25 发布

阅读量780

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/chenzao1220/article/details/49850721

版权

22 篇文章 0 订阅

订阅专栏

1.设置元素可拖动
在标签中把draggable设为true,如：

<div draggable="true"></div>

2.事件

ondragstart 开始

ondragend 结束

ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式，如：

wrap1.ondragover = function (e){
    var ev = e || window.event;
    ev.preventDefault()
};

ondrop 进行放置
当放置被拖数据时，会发生 drop 事件。

（标签中添加 controls=”controls”可控制）
音频标签：

<audio>

视频标签：

<video>

方法：

load() 重新加载
play() 播放
pause() 暂停

属性：

currentTime：当设置该属性时，播放会跳跃到指定的位置。单位：秒。

设置 currentTime 属性：
audio|video.currentTime="seconds"
返回 currentTime 属性：
audio|video.currentTime

muted 属性设置或返回音频/视频是否应该被静音（关闭声音）。

设置 muted 属性：
audio|video.muted=true|false    //true为关闭，faise为默认，打开声音。
返回 muted 属性：
audio|video.muted

paused 属性返回音频/视频是否已暂停。

true为暂停。false为播放。

cookie
localStorage
sessionStorage

共同点：都是保存在浏览器端。

区别：
cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

cookie有大小限制，最大不超过4k。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

sessionStorage：仅在当前页面窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效（一般为浏览器关闭之前），即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

关注