文章目录

<embed>标签

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

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

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

<object> 标签

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

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

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

<video>标签

<video> 是 HTML 5 中的新标签。<video> 标签的作用是在 HTML 页面中嵌入视频元素。

问题：

  • <video> 元素在老式浏览器中无效。
  • <video> 元素无法通过 HTML 4 和 XHTML 验证。

示例：

<!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>

在这里插入图片描述
<video> 元素提供了 播放、暂停和音量控件来控制视频。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。

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

<video>浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素。
注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。

视频格式与浏览器的支持

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

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 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 当视频由于需要缓冲下一帧而停止时触发。

兼容多版本的浏览器

使用source元素来定义一个以上的媒体元素，一个video元素中可以包含任意数量的source元素，浏览器会加载第一个它支持的source元素引用的文件格式，并忽略其他的来源，无法播放HTML5视频的浏览器则会显示你提供的消息中的备用链接

<video controls="controls">
<source src="my-video.mp4" type="video/mp4" />
<source src="my-video.webm" type="video/webm" />
为旧浏览器输入备用链接或备用文本信息
</video>

自定义控制栏

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)：当在全屏和非全屏状态切换时，触发该事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <progress value="50" max="100"></progress>
    <input type="number">
    <video src="./videos.mp4" controls></video>
    <div class="btns">
        <button>播放</button>
        <button>暂停</button>
        <button>快进</button>
        <button>快退</button>
        <button>快倍速</button>
        <button>慢倍速</button>
    </div>
    <div class="play">
        <button id="play">播放</button>
        <button id="progress">获得播放百分比</button>
    </div>
    <div class="showprogress"></div>
    <script>
        //1.获取视频
        var video=document.getElementsByTagName('video')[0];
        //2.获取音频
        var btns=document.getElementsByClassName('btns')[0];
        console.log(btns);
        //3.判断按钮的文本内容、绑定事件
        btns.onclick=function(){
            //4.获取按钮内的事件 因为这里产生了点击 所以有点击事件
            var text=event.target.innerText;
            if(text == '播放'){
                // console.log(video.volume);   // 视频的音量
                // console.log(video.duration);   //视频的总长度                
              	// console.log(video.cuttertTime);   //视频当前播放的时长              	
              	// console.log(video.paused);   //视频当前播放状态   true为暂停
                video.play()
            }
            if(text == '暂停'){
                video.pause()
            }
            if(text == '快进'){
                video.currentTime +=10
                video.play()
            }
            if(text == '快退'){
                video.currentTime -=10
                video.play()
            }
            if(text == '快倍速'){
                console.log(video.playbackRate);
                video.playbackRate *= 1.8
                video.play()
            }
            if(text == '慢倍速'){
                video.playbackRate *= 0.5
                video.play()
            }
        }
 
         //需求：2. 同一个按钮实现暂停播放
         var play_btn = document.getElementById('play')
         play_btn.onclick = function(){
            if(video.paused){			//判断视频播放状态  true为暂停
                video.play()
                play_btn.innerText = '暂停'
            }else{
                video.pause()
                play_btn.innerText = '播放'
            }
        }
 
         // 需求：3.获得播放的百分比
         var progress = document.getElementById('progress')
         progress.onclick= function(){
            var total = video.duration
            var current = video.currentTime
            var res = (current/total*100).toFixed(2) +'%'
            console.log(res);
						//将百分比存入div
            var showprogress = document.getElementsByClassName('showprogress')[0]
            showprogress.innerText = res
        }
 
    </script>
</body>
</html>
# html # 音视频 # 前端
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

倒计时！中关村科学城工业软件创新暨开源峰会28日启幕，会议亮点抢先看

avatar GitCode 开源社区
cover

ollama/ollama 开源项目洞察报告

avatar GitCode 开源社区
cover

GitCode G-Star 开源校园行·成电站圆满落幕，校园开发者共探AI未来

avatar GitCode 开源社区