html播放视频

初学小白Lu

已于 2024-02-05 16:52:27 修改

阅读量4.2k

点赞数

分类专栏：前端文章标签： html 音视频前端

于 2023-09-22 09:33:11 首次发布

本文链接：https://blog.csdn.net/weixin_43956958/article/details/132823821

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

<embed>标签
<object> 标签
<video>标签
兼容多版本的浏览器
自定义控制栏

<embed>标签

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

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

<object> 标签

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

初学小白Lu

关注

0
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
html播放视频

video播放相关的API：video.duration：整个媒体文件的播放时长，单位svideo.paused ：如果媒体文件被暂停，则返回true；如果还没开始播放，默认返回truevideo.ended ：如果媒体文件播放完毕，则返回truevideo.currentTime：以s为单位返回从开始播放到现在所用的时间。在播放过程中，设置currentTime来进行搜索，并定位到媒体文件的特定位置。
复制链接

扫一扫