html播放视频

文章目录

  • 标签
  • 标签
    • 视频格式与浏览器的支持
    • DOM元素提供的方法、属性和事件
  • 自定义控制栏
  • 标签

    标签的作用是在 HTML 页面中嵌入多媒体元素。
    前提:浏览器支持 Flash。iPad 和 iPhone 不能显示 Flash 视频。视频不能转成其他格式。

    <embed src="movie.swf" height="200" width="200"/>
    

    HTML 代码显示嵌入网页的 Flash 视频。

    标签

    标签的作用是在 HTML 页面中嵌入多媒体元素。
    前提:浏览器支持Flash。iPad 和 iPhone 不能显示 Flash 视频。视频不能转成其他格式。

    <object data="movie.swf" height="200" width="200"/>
    

    HTML 片段显示嵌入网页的一段 Flash 视频:

    问题:

    示例:

    DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>视频title> 
    head>
    <body>
    
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
    video>
    
    body>
    html>
    

    html播放视频_第1张图片

    标签 描述
    定义一个视频
    定义多种媒体资源,比如 和
    定义在媒体播放器文本轨迹

    Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持

    视频格式与浏览器的支持

    • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
    • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
    • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

    当前,

    浏览器支持的视频格式
    浏览器 MP4 WebM Ogg
    Internet Explorer YES NO NO
    Chrome YES YES YES
    Firefox YES YES YES
    Safari YES NO NO
    Opera YES (从 Opera 25 起) YES YES
    视频格式
    格式 MIME-type
    MP4 video/mp4
    WebM video/webm
    Ogg video/ogg

    DOM元素提供的方法、属性和事件

    方法
    方法 描述
    addTextTrack() 向音频/视频添加新的文本轨道。
    canPlayType() 检测浏览器是否能播放指定的音频/视频类型。
    load() 重新加载音频/视频元素。
    play() 开始播放音频/视频。
    pause() pause()
    属性
    属性 描述
    audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。
    autoplay 设置或返回是否在加载完成后随即播放音频/视频。
    buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象。
    controller 返回表示音频/视频当前媒体控制器的 MediaController 对象。
    controls 设置或返回音频/视频是否显示控件(比如播放/暂停等)。
    crossOrigin 设置或返回音频/视频的 CORS 设置。
    currentSrc 返回当前音频/视频的 URL。
    currentTime 设置或返回音频/视频中的当前播放位置(以秒计)。
    defaultMuted 设置或返回音频/视频默认是否静音。
    defaultPlaybackRate 设置或返回音频/视频的默认播放速度。
    duration 返回当前音频/视频的长度(以秒计)。
    ended 返回表示音频/视频错误状态的 MediaError 对象。
    loop 设置或返回音频/视频是否应在结束时重新播放。
    mediaGroup 设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)。
    muted 设置或返回音频/视频是否静音。
    networkState 返回音频/视频的当前网络状态。
    paused 设置或返回音频/视频是否暂停。
    playbackRate 设置或返回音频/视频播放的速度。
    played 返回表示音频/视频已播放部分的 TimeRanges 对象。
    preload 设置或返回音频/视频是否应该在页面加载后进行加载。
    readyState 返回音频/视频当前的就绪状态。
    seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象。
    seeking 返回用户是否正在音频/视频中进行查找。
    src 设置或返回音频/视频元素的当前来源。
    startDate 返回表示当前时间偏移的 Date 对象。
    textTracks 返回表示可用文本轨道的 TextTrackList 对象。
    videoTracks 返回表示可用视频轨道的 VideoTrackList 对象。
    volume 设置或返回音频/视频的音量。
    事件
    事件 描述
    abort 当音频/视频的加载已放弃时触发。
    canplay 当浏览器可以开始播放音频/视频时触发。
    canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。
    durationchange 当音频/视频的时长已更改时触发。
    emptied 当目前的播放列表为空时触发。
    ended 当目前的播放列表已结束时触发。
    error 当在音频/视频加载期间发生错误时触发。
    loadeddata 当浏览器已加载音频/视频的当前帧时触发。
    loadedmetadata 当浏览器已加载音频/视频的元数据时触发。
    loadstart 当浏览器开始查找音频/视频时触发。
    pause 当音频/视频已暂停时触发。
    play 当音频/视频已开始或不再暂停时触发。
    playing 当音频/视频在因缓冲而暂停或停止后已就绪时触发。
    progress 当浏览器正在下载音频/视频时触发。
    ratechange 当音频/视频的播放速度已更改时触发。
    seeked 当用户已移动/跳跃到音频/视频中的新位置时触发。
    seeking 当用户开始移动/跳跃到音频/视频中的新位置时触发。
    stalled 当浏览器尝试获取媒体数据,但数据不可用时触发。
    suspend 当浏览器刻意不获取媒体数据时触发。
    timeupdate 当目前的播放位置已更改时触发。
    volumechange 当音量已更改时触发。
    waiting 当视频由于需要缓冲下一帧而停止时触发。

    自定义控制栏

    video播放相关的API:
    video.duration:整个媒体文件的播放时长,单位s
    video.paused :如果媒体文件被暂停,则返回true;如果还没开始播放,默认返回true
    video.ended :如果媒体文件播放完毕,则返回true
    video.currentTime:以s为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索,并定位到媒体文件的特定位置
    video.volume :在0.0到1.0之间设置音频音量的相对值,或者查询当前音量相对值
    video.muted :检测当前是否为静音,是则为true;为文件设置静音或消除静音
    video.play() :播放视频文件
    video.pause() :暂停处于播放状态的视频文件
    video.canPlayType() :测试video元素是否支持给定MIME类型的文件

    监听事件:
    ontimeupdate :当video.currentTime发生改变时触发该事件

    全屏控制API:
    video.webkitRequestFullScreen():全屏显示
    document.webkitCancelFullScreen():退出全屏
    document.webkitIsFullScreen:如果当前处于全屏状态,则返回true,否则返回false
    document.addEventListener(‘webkitfullscreenchange’, handler):当在全屏和非全屏状态切换时,触发该事件

    你可能感兴趣的:(HTML,html,音视频,前端)