首页 前端知识 html播放视频

html播放视频

2024-01-26 10:01:12 前端知识 前端哥 470 525 我要收藏

文章目录

  • <embed>标签
  • <object> 标签
  • <video>标签
    • <video>浏览器支持
    • 视频格式与浏览器的支持
    • DOM元素提供的方法、属性和事件
  • 兼容多版本的浏览器
  • 自定义控制栏

<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
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYES (从 Opera 25 起)YESYES
视频格式
格式 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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/420.html
标签
音视频
评论
发布的文章

什么是JSON 为什么使用它

2024-05-07 13:05:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!