英语驿站

video是什么意思 对象的常用属性和方法

video是什么意思 对象的常用属性和方法

HTML多媒体 , 主要分为Audio 音频和 Video 视频。

1:Audio

基本语法

src 指定当前播放的音频文件,controls播放控制器,loop歌曲循环,autoplay自动播放 (chrome66之后被禁止)主流浏览器已经关闭了自动播放,需要js触发才行,preload 预加载,如果使用了autoplay这个属性preload就失效了。

<audio src="xxxx.mp3" controls="controls" loop="loop" autoplay="autoplay" > 您的浏览器不支持html5的audio标签 </audio>

Audio支持格式有:

Firefox:支持 Ogg Vorbis和WAV

Opera :支持Ogg Vorbis和WAV

Safari :支持MP3,AAC格式 ,和MP4

Chrome :支持Ogg Vorbis,MP3,WAV,AAC和MP4

Internet Explorer 9 :支持MP3,AAC格式 ,和MP4

IOS :支持MP3,AAC格式 ,和MP4

Android :支持AAC和MP3

Audio 不光是一个HTML标签,它还是一个window对象。既然是对象,那就有方法和属性。

对象的常用属性和方法

  • currentTime,获取当前播放时间
  • duration,获取歌曲的总时间
  • play,播放
  • audio.addEventListener("play",() => {}); audio.onplay = () => {}
  • pause,暂停
  • loadstart,开始加载
  • durationchange,时长数据变化
  • loadedmetadata,元数据已加载
  • progress,加载中
  • canplay,可以播放
  • canplaythrough,边缓冲边播放
  • play(),播放歌曲
  • pause(),暂停歌曲
  • load(),重新加载歌曲
  • Audio.js

    以前的Audio浏览器是不能直接播放的,如果需要播放一个音频需要借助一个flash插件。后来有了Audio.js的出现后,播放音频不用依赖flash插件了。flash是使用as来编写的,它和JavaScript有点相像,但是有一些门槛,在此基础上,出现了很多的Audio插件,audio插件做了两件事情,一件是旧版的浏览器兼容(http://kolber.github.io/audiojs/),第二件是美化自定义了浏览器的外观。

    // 加载audio.js <script src="/audiojs/audio.min.js"></script> // 静态加载 <script> audiojs.events.ready(function() { const as = audiojs.createAll(); }); </script> // 动态加载 <audio src="./music.mp3" preload="auto" />

    2:Video

    基本语法

    src源,controls播放控制器,loop 循环播放,autoplay 自动播放,height,width,宽度和高度,在Audio里面不能指定,但是在Video里面是可以的,muted 静音,poster 预览图(当视频没有播放或者正在加载时展示给用户的一张图片,为了交互的友好性),preload 预加载,和autoplay一块时失效。

    <video src="xxxx.mp4" controls="controls" loop="loop" autoplay="autoplay" > 您的浏览器不支持html5的video标签 </video>

    Video 对象

    常用的属性和方法:

  • currentTime,获取当前播放时间
  • duration,获取歌曲的总时间
  • play,播放
  • video.addEventListener("play",() => {}); video.onplay = () => {}
  • pause,暂停
  • loadstart,开始加载
  • durationchange,时长数据变化
  • loadedmetadata,元数据已加载
  • loadeddata,当前帧的数据已加载,无法播放下一帧
  • progress,加载中
  • canplay,可以播放
  • canplaythrough ,边缓冲边播放
  • play(),播放视频 返回一个promise
  • pause() ,暂停视频
  • load() ,重新加载视频
  • 视频格式与流媒体

    video支持的视频的格式主要有三种:MP4、ogg、webm。

    Firefox :支持Ogg Theora格式和WEBM Opera :支持Ogg Theora格式和WEBM Safari :支持MP4 Chrome :支持Ogg Theora格式,MP4和WEBM Internet Explorer 9 :支持MP4和WEBM(需要安装插件) IOS :支持MP4 Android :支持MP4和WEBM(Android 2.3版本以上)

    流媒体是指采用流式传输的方式在Internet播放的媒体格式(流媒体格式video标签是不支持的)。

    流媒体又叫流式媒体,它是指商家用一个视频传送服务器把节目当成数据包发出,传送到网络上。

    用户通过解压设备对这些数据进行解压后,节目就会像发送前那样显示出来。

    典型的流媒体格式:rtmp、rtsp、flv都是流媒体的传输协议。

    rtmp 是Adobe公司提供的一个流媒体协议,使用的是TCP协议,稳定性好

    rtsp 是Netscape网景公司提供的一种协议,使用的是UDP协议,实时性好

    flv 是苹果公司提出的一个流媒体的一个协议,也是使用的TCP协议,把整个视频流切割成一段一段的m3u8文件

    Video.js

    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script> const player = videojs(‘video‘, options, function onPlayerReady() { this.play(); this.on(‘ended‘, function() { videojs.log(‘播放结束‘); }); });
    赞 ()
    分享到:更多 ()

    相关推荐

    后台-系统设置-扩展变量-手机广告位-内容页底部广告位3
    留言与评论(共有 0 条评论)
       
    验证码: