• Html5 部分帮助文档 未完待续


     W3cSchoolH5帮助文档

    Video属性

    视频播放效果

     

    Video标签 src视频得目录 controls属性提供添加 播放 和音量控件

    当然呢 不设置宽和高得话 视频会很大

     

    Video还可以播放mp4类型得视频 第二个设置了宽和高

    Video可以有多个source标签

     

    Video得属性如下

    Autoplay=”autopla”如果出现该属性得话视频准备就绪 就播放

    Controls=”controls”如果出现该属性那么显示播放按钮和声音

    Height=”00px”如果出现该属性那么设置视频得高度

    Width=”00px”

    Lopp=”loop”是否循环播放

    Src=””视频资源路径

    Preload=”preload”如果使用该属性那么视频加载完等待播放 如果使用autoplay那么前面得属性作废

    2HTML 5 Video + DOM

    目标效果是

     

    1首先呢! 给video添加一个id属性

    2然后获取video对象var video1= document.getElementById(“video1”);

     然后用paused方法判断是否是播放状态  如果是播放状态则返回true alert(video1.paused)

    如果是播放就停止 停止就播放

     

    至于 点击大 就给video得宽度 放大就可以了

    点击大

    点击小

    点击中

    Html5比较常用得得属性方法和事件如下

     

    HTML 5 音频

    现在浏览器上大多数都是通过flash来播放得 然而并且所有浏览器都右同样得音频

    Html5规定了一种通过audio元素来包含因音频得方法

    Audio 元素能够播放声音文件或者音频流

    当前audio支持三种音频格式下面看一下 在各自浏览器上得兼容

     

    如果需要在html5中播放音频

    只需要 一句 <audio src=”” controls=”controls”>

     

    Controls属性提供播放 音量控件

    那么大家可以看到 <audio></audio>中得文本是提供不支持得浏览器 显示得

    Audio也可以有多个source 元素 source可以连接不同得资源音频文件 ,浏览器将使用第一个可识别得模式显示出来

     

    Internet Explorer 8 不支持 audio元素 在IE9中将提供audio元素得支持

    Audio得属性如下

    Controls=”controls”显示播放 声音得控件 比如播放按钮

    Loop=”loop”属性 循环播放

    Preload=”preload”如果出现该属性,则音频在页面加载时进行加载并且预备播放

    Src=””路径

    Autoplay=”autoplay”如果设置了该属性那么页面加载完毕就播放

     

    Html5拖放drag drop

    拖放(drapdrop)时html5标准组成部分

    拖放一种常见得特性,既抓取对象以后拖到另一个位置

    html5中拖放时标准得一部分 任何元素都能拖放

    浏览器支持如何?

     

    那么 看一下拖放得效果

     

    W3School拖到 框里  拖完后得样子是

    咱们看看 具体实现

    实现代码如下

     

    虽然代码很多  但是 我们一步一步分解就不难了

    首先呢 为了让img标签可以拖动 我们把draggable=”true”他得英文意思是可拖放

     

    Ondragstart事件 意思是拖拽开始

    放到何处 - ondragover

    ondragover 事件规定在何处放置被拖动的数据。

    默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

    这要通过调用 ondragover 事件的 event.preventDefault() 方法:

    event.preventDefault()

    具体得 js实现如下

     

    未完待遇....

  • 相关阅读:
    上篇用到的matcher函数
    lambdaj学习
    Redis高级应用——2
    Redis入门
    从gitee 下载代码到本地
    CSS中对图片(background)的一些设置心得总结
    nodejs 安装Ionic 和cordova
    Spring MVC内容协商机制详解
    基于Servlet3.0的编程式SpringMVC实例详解
    基于Junit的Spring集成测试方法
  • 原文地址:https://www.cnblogs.com/langjunnan/p/6602088.html
Copyright © 2020-2023  润新知