美文网首页html5入门教程视觉艺术
html5入门教程(六)视频和音频

html5入门教程(六)视频和音频

作者: 党云龙 | 来源:发表于2019-11-20 09:34 被阅读0次

    html 4 中的语法


    <object> 标签的作用是在 HTML 页面中嵌入多媒体元素
    <object data="1.swf" width="400"></object>
    <embed> 标签的作用是在 HTML 页面中嵌入多媒体元素
    <embed src="1.swf" width="400">

    缺点


    需要flash,效率低
    部分浏览器不支持 Flash
    iPad 和 iPhone 安卓4.4 都不支持flash

    html5 中的语法


    <video width=" " height="" src=""> </video>

    video

    source元素


    video中可以包含source元素,用于提供多种格式的文件,供浏览器选择。
    可以链接不同的视频文件,浏览器将使用第一个可识别的格式

    例子:

    <video id="vid" width="400" height="400" src="1.mp4" controls loop poster="1.jpg">
         <source src="1.mp4" type="video/mp4"></source>
         <source src="1.ogg" type="video/ogg"></source>
         <a href="#">您的浏览器不支持视频播放。</a>
    </video>
    

    视频 video 常用属性


    常用属性

    controls 属性: 在视频元素的底部展示一个元素自带的控制条工具。
    autoplay 属性: 一旦视频就绪马上开始自动播放。
    preload 属性: 是否在页面加载后载入视频 ( 预加载 ) 如有autoplay属性则进行忽略
    preload 可选值
    auto (默认) : 当页面加载后载入整个视频
    metadata : 只加载播放文件的基本信息(如:尺寸、持续时间、第一帧信息、曲目列表等)
    none : 当页面加载后不载入视频
    loop 属性: 视频结束后将重新开始播放。
    muted 属性:如果出现该属性,则输出为静音。
    poster 属性:将在视频文件播放前显示图片(广告图片)。

    video 状态


    duration 整个媒体文件的播放时长,以s为单位
    currentTime 当前播放时间,以s为单位
    paused 如果媒体文件当前被暂停,则返回true

    例子:

    start.onclick=function(){
    //判断播放器的paused状态 去决定是播放还是暂停
       if(vid.paused){
           vid.play()
       }else{
           vid.pause()
       }
    }
    

    video 方法


    load ( ) 方法 : 用于重新加载src指定的媒体文件。
    pause ( ) 方法 : 用于暂停正在播放中的媒体文件。
    play ( ) 方法 : 用于播放媒体文件。

    video 事件

    error--------------请求数据时遇到错误时触发
    play---------------开始播放时触发
    pause-------------暂停时触发
    timeupdate-------播放时间改变时触发
    ended-------------播放结束时触发
    volumechange----音量改变时触发

    提示
    可以使用addEventListener 方法来对事件发生进行监听。
    在js中使用onerror的写法,前面加一个on,jquery无需on

    例子:

    vid.onerror=function(){
         alert("请求数据错误")
    }
    

    音频 audio 常用属性


    <audio  src="" controls> </audio>
    

    src:音乐的URL
    controls:浏览器自带的控制条

    兼容性 属性

    注意:

    document.addEventListener("touchstart",function(){
       au.play();
    },false)
    

    安卓和ios都不支持偷跑流量,多媒体元素播放,必须用touchstart (接触操作)触发
    所以是没有办法自动播放的。

    相关文章

      网友评论

        本文标题:html5入门教程(六)视频和音频

        本文链接:https://www.haomeiwen.com/subject/luinictx.html