zoukankan      html  css  js  c++  java
  • html5中的video和audio

    html5中的video和audio最大的优点就是不需要第三方插件,可以直接插入,并且用同一的API接口控制;目前缺点就是不支持流播放和播放媒体类型不统一。
    <video src="test1.mp4" controls>
    如果浏览器不支持,备用代码写在这里,比如可用flash插入视频或是提示
    </video>
    <audio src="test2.mp3" controls>同上</audio>
    如果浏览器不支持,备用代码写在这里,比如可用flash插入视频或是提示

    如果使用了controls属性,就是使用默认的播放控件;如果不使用该属性,就需要自己写代码控制播放、暂停等方法(值得注意的是如果audio不加controls属性,那么音频是默认隐藏的),其他属性后面介绍。
    由于各种原因,html5没有对播放文件类型做规定,所以有了多source来弥补,就说如果不支持播放第一个文件就播放下一个,以此类推。
    <video controls>
    <source src="video1.ogv" type='video/ogg;codecs="theora,vorbis"'>
    <source src="video2.mp4" type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"'>
    如果2个都播放不了,执行这里的代码
    </video> 
    type类型可不写,由浏览器自己判断。audio使用方法一样。

    属性
    1.只读属性
    played:返回TimeRanges对象,表示已播放的时间段
    paused:布尔值,是否已暂停
    ended:布尔值,是否已结束
    startTime:开始播放时间,通常为0,除非缓冲过
    duration:总的播放时间
    currentSrc:媒体数据地址,对应source的地址
    error:发生错误时代码(error.code有4个值,:1下载终止;2下载时网络错误;3解码错误;4媒体类型不支持)
    networkState:网络状态(有4个值:0初始状态;1已选好编码类型但未连接;2加载中;3没有支持的编码,不加载)
    readyState:返回当前媒体播放位置状态(有5个值:0没有可播放;1数据无效;2没有获取到下一帧或者到了最后一帧;3获取到了下一帧;4可以正常播放)
    buffered:返回一个对象,是TimeRanges对象的接口,确认浏览器是否已缓存数据
    seeking:布尔值,是否正在请求数据
    seedable:返回TimeRanges对象,表示请求到的数据范围

    2.读写属性
    controls:是否带有默认播放控件
    src:媒体文件地址
    autoplay:是否自动播放
    loop:是否循环播放
    currentTime:从开始到现在播放的时间
    volume:音量值0.0-1.0
    muted:是否静音
    preload:预加载(有3个值:none不预加载;metadata只预加载元数据,第一帧等;auto预加载全部),如果媒体设置了autoplay,忽略此属性
    autobuffer:布尔值,是否预加载。如果媒体设置了autoplay,忽略此属性,和上边有点重复啊
    defaultPlaybackRate:媒体默认播放速率
    playbackRate:媒体当前播放速率

    3.video独有属性
    poster:视频为加载完不可用时,显示的图片
    width,height:视频的宽和高
    videoWidth,videoHeight:这也是只读属性,没有分在上边。视频本身的宽高

    视频和音频的4个方法
    load():一般不用,除非是重新载入或动态记载视频
    paly():播放
    pause():暂停
    canPlayType(type):测试是否支持播放类型

    事件
    play:播放时触发
    pause:暂停时触发
    ended:播放结束后触发
    abort:终止下载触发
    error:错误触发
    loadstart:开始寻找媒体数据触发
    progress:正在获取数据时触发
    ...

  • 相关阅读:
    【python刷题】前缀和
    【python刷题】数组链表去重
    【python刷题】滑动窗口法
    【python刷题】二分查找
    【python刷题】广度优先搜索(BFS)
    【python刷题】回溯算法(深度优先搜索DFS)
    机器学习十讲-第三讲分类
    数学知识-质数&约数
    树与图的DFS与BFS
    桥梁保护与监控-开发进度(二)
  • 原文地址:https://www.cnblogs.com/bianyuan/p/2356416.html
Copyright © 2011-2022 走看看