HTML5元素拖拽、视频、音频

## 关于文字与图片的拖拽 ##
1 给对象设置可拖拽属性

  `draggable='true'`
 
2 给对象绑定起始拖拽事件
 
  `ondragestart='drag(event)`
 
3 设置事件data

 `function drags(e){
            e.dataTransfer.setData("Text",e.target.id);
        }`
4 给目标位置标签设置拖拽过程的事件 

`οndrοp="drops(event)"`

5 接收对象传过来的参数,插入当前标签内(阻止浏览器默认行为 `preventDefault`

    `function drops(e){
            var data=e.dataTransfer.getData('Text');
            e.target.appendChild(document.getElementById(data));
            e.preventDefault();
        }`
6 最后给目标标签设置拖拽结束事件 `οndragοver="over(event)"`,再次阻止浏览器默认行为

    `function over(e){
            e.preventDefault();
        }`
7 若要再次反向拖拽回去就要在此事件的父级标签内绑定拖拽过程以及拖拽结束事件 `οndrοp="drops(event)" οndragοver="over(event)"`

## HTML5 video(视频)标签的使用 ##
1. 此标签的属性:
    1. src:播放此视频的路径
    2. width:宽
    3. height:高
    4. controls:播放控件的显示 `controls='controls'`
    5. autoplay:就绪后马上播放控件 `autoplay='autoplay'`
    6. loop:重复播放
    7. preload:页面加载时进行播放若有autoplay属性则忽略该属性
2. 方法:
    1. play():播放功能
    2. pause():暂停功能

3. 视频格式:
    1. ogg
    2. mp4
    3. webM


## HTML5 audio(音频)标签使用 ##
1. 此标签的属性:
    1. src:播放此视频的路径
    2. controls:播放控件的显示 `controls='controls'`
    3. autoplay:就绪后马上播放控件 `autoplay='autoplay'`
    4. loop:重复播放
    5. preload:页面加载时进行播放若有autoplay属性则忽略该属性

2. 视频格式:
    1. ogg
    2. mp3
    3. wav
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值