zoukankan      html  css  js  c++  java
  • html5基础---音视频

    1. video&audio基础用法

    <video src="" control="controls" width="" height=""></video>
    <!-- width、height不指定默认为视频撑开,取决于像素
    	 controls:该属性定义是显示还是隐藏用户控制界面 -->
    <audio src="" control="controls"></video>
    
    <!-- 兼容性写法 -->
    <video controls width="300" height="300">
    			<source src="resource/video/OUTPUT.mp4" type="video/mp4"></source>
    			<source src="resource/video/OUTPUT.ogv" type="video/ogg"></source>
    			<source src="resource/video/OUTPUT.webm" type="video/webm"></source>
    			当前浏览器不支持video直接播放,点击这里下载视频:<a href="resource/video/OUTPUT.mp4">下载视频</a>
    		</video>
    		
    		<audio controls >
    			<source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'></source>
    			<source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'></source>
    			<source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'></source>
    			当前浏览器不支持audio直接播放,点击这里下载视频:<a href="resource/audio/OUTPUT.mp3">下载视频</a>
    		</audio>
    
    <!--
    	视频:
    	type='video/webm; codecs="vp8, vorbis"'
    	type='video/ogg; codecs="theora, vorbis"'
    	type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
    	
    	音频:
    	type='audio/ogg; codecs="vorbis"'
    	type='audio/aac; codecs="aac"'
    	type='audio/mpeg'
    -->
    

    音视频相关简介、兼容性与编解码方式见此处

    2. 音视频的attribute

    · video

    width : 视频显示区域的宽度,单位是CSS像素
    height : 视频展示区域的高度,单位是CSS像素
    src : 要嵌到页面的视频的URL
    poster : 一个海报帧的URL,用于在用户播放或者跳帧之前展示
    controls : 显示或隐藏用户控制界面
    autoplay : 媒体是否自动播放
    loop : 媒体是否循环播放
    muted : 是否静音
    preload : 该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
    none : 提示作者认为用户不需要查看该视频,服务器也想要最小化访问流量;
    ​ 换句话说就是提示浏览器该视频不需要缓存。
    metadata : 提示尽管作者认为用户不需要查看该视频; 常用
    ​ 不过抓取元数据(比如:长度)还是很合理的。
    auto : 用户需要这个视频优先加载;
    ​ 换句话说就是提示:如果需要的话,可以下载整个视频,即使用户并不一定会用它。
    空字符串 :也就代指 auto 值。

    · audio

    ​ 除无widthheightposter属性外,其他与video相同。

    3. 音视频property

    · 通用

    duration : 媒体总时间(只读)
    chrome等浏览器刚开始取值为NaN,需要等视频信息加载(延时或者绑定事件)
    currentTime : 开始播放到现在所用的时间(可读写)
    muted : 是否静音(可读写,相比于volume优先级要高)
    volume : 0.0-1.0的音量相对值(可读写)
    mutedvolume 不会实时同步,设置muted时需再手动设置volume
    paused : 媒体是否暂停(只读)
    ended : 媒体是否播放完毕(只读)
    error : 媒体发生错误的时候,返回错误代码 (只读)
    currentSrc : 以字符串的形式返回媒体地址(只读)

    · video特有的

    poster : 视频播放前的预览图片(读写)
    width、height : 设置视频的尺寸,即标签的尺寸(读写)
    videoWidth、 videoHeight : 视频的实际尺寸(只读)

    4. 音视频相关函数

    play() : 媒体播放
    pause() : 媒体暂停
    load() : 重新加载媒体 ---- 通过source标签更改的src,需要重新load才能生效

    5. 相关事件

    · video && audio

    abort : 在播放被终止时触发。例如, 当播放中的视频重新开始播放时会触发这个事件。
    canplay : 在媒体数据已经有足够的数据(至少播放数帧)可供播放时触发。
    ​ 这个事件对应CAN_PLAY的readyState。
    canplaythrough : 在媒体的readyState变为CAN_PLAY_THROUGH时触发。
    ​ 表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。
    注意:手动设置currentTime会使得firefox触发一次canplaythrough事件,其他浏览器或许不会如此。
    durationchange : 元信息已载入或已改变,表明媒体的长度发生了改变。
    ​ 例如,在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
    emptied : 媒体被清空(初始化)时触发。
    ended : 播放结束时触发。
    error : 在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
    loadeddata : 媒体的第一帧已经加载完毕。
    loadedmetadata : 媒体的元数据已经加载完毕,现在所有的属性包含了它们应有的有效信息。
    loadstart : 在媒体开始加载时触发。
    mozaudioavailable : 当音频数据缓存并交给音频层处理时
    pause : 播放暂停时触发。
    play : 在媒体回放被暂停后再次开始时触发。即,在一次暂停事件后恢复媒体回放。
    playing : 在媒体开始播放时触发(不论是初次播放、在暂停后恢复、或是在结束后重新开始)。
    progress : 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
    ratechange : 在回放速率变化时触发。
    seeked : 在跳跃操作完成时触发。
    seeking : 在跳跃操作开始时触发。
    stalled : 在尝试获取媒体数据,但数据不可用时触发。
    suspend : 在媒体资源加载终止时触发,这可能是因为下载已完成或因为其他原因暂停。
    timeupdate : 元素的currentTime属性表示的时间已经改变。
    volumechange : 在音频音量改变时触发(既可以是volume属性改变,也可以是muted属性改变)。
    waiting : 在一个待执行的操作(如回放)因等待另一个操作(如跳跃或下载)被延迟时触发。

  • 相关阅读:
    iOS开发-ScrollView图片缩放
    算法-随机不重复数列生成
    iOS开发-舒尔特表
    iOS开发-音乐播放
    iOS开发-简单的图片查看器
    iOS开发-Interface Builder的前世今生
    iOS开发-DatePicker控件
    iOS开发-UI基础Demo
    Objective-C-Category类别
    Objective-C面向对象之实现类
  • 原文地址:https://www.cnblogs.com/GisNicer/p/14760616.html
Copyright © 2011-2022 走看看