HTML5—视频插入—video元素的属性、事件与方法

最新推荐文章于 2024-05-31 22:20:16 发布

叶落無痕

最新推荐文章于 2024-05-31 22:20:16 发布

阅读量8.7k

点赞数 1

分类专栏：学习笔记 HTML5 文章标签： html5 视频

本文链接：https://blog.csdn.net/jeason_liu/article/details/49134085

版权

学习笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML5

8 篇文章 0 订阅

订阅专栏

先来两个小问题：

1、目前浏览器是否都支持H5中的video元素？

答：否。IE8及其之前的版本均不支持video元素

2、video支持多少种视频格式？

答：三种。

MP4 - 目前比较主流的视频格式，所有浏览器均支持该格式

OGG - 之前手机端的一种视频格式

WEBM - 目前唯一一个支持超高清格式的视频格式。该方法是谷歌公司新推出

一、在<video>元素中同时引入三种视频格式?

在<video>元素中使用<source>元素，浏览器可以自动识别对应的视频格式，并加载。

二、<video>元素的属性

autoplay--自动播放

controls--显示操作面板，如播放/暂停按钮，进度条，音量等

loop--视频循环播放

poster--设置视频播放之前显示的图片，与src属性类似，值为路径

preload--设置视频的缓存情况。共有三个值：

auto：默认值，表示尽快缓存视频。

none：表示不缓存视频。

metadata：只缓存视频的基本信息，如高度，宽度等。

width--设置视频的宽度。

height--设置视频的高度。

另外，video标签之间的文本为浏览器不支持video元素时显示的提示文字

<video src="DATA/oceans-clip.webm" controls autoplay loop width="600px" height="400px" poster="DATA/oceans-clip.png" preload="auto">不好意思，你的浏览器不支持该视频播放</video>

三、video元素的事件与方法

事件：

play--当视频播放的时候触发该事件。

pause--当视频暂停的时候触发该事件。利用该事件可以做出暂停时间的广告效果。

ended--当视频播放结束的时候触发该事件。利用该事件可以做视频顺序播放功能。

error--当视频播放发生错误时触发。如：所请求的视频找不到。

canplay--当视频可播放的时候触发，如：已经缓存的视频部分会触发该事件。

canplaythrough--当整个视频可顺利播放的时候触发。

progress--用于更新视频的下载进度，会周期性触发。

方法：

play()--用于播放视频。

pause()--用于暂停视频。

load()--用于加载视频
canPlayType(type)--判断当前浏览器是否支持当前视频格式，返回值为布尔类型。

模拟视频暂停时的广告效果：

<!DOCTYPE HTML>
<html>
<head>
<title>视频元素的事件</title>
<meta charset="utf-8"/>
<style>
#adv{
width:50px;
height:50px;
position:absolute;
top:50px;
left:220px;
display:none;
}
img{
width:200px;
height:150px;
}
</style>
</head>
<body>
<video id="video" src="DATA/oceans-clip.mp4" controls></video>
<div id="adv">
<a href="#">
<img src="DATA/Penguins.jpg"/>
</a>
</div>
</body>
<script>
window.οnlοad=function(){
var video=document.getElementById("video");
video.addEventListener("play",myPlay);
video.addEventListener("pause",myPause);
var adv=document.getElementById("adv");
function myPlay(){
adv.style.display="none";
}
function myPause(){
adv.style.display="block";
}
}
</script>
</html>

运行效果：

是不是感觉图片萌萌哒，哈哈，请无视，效果达到就好。

属性：

paused--为true,表示视频为暂停状态。
ended--为true,表示视频为结束状态。
duration--返回当前视频的时长,单位为秒。
currentTime--设置或获取视频播放的当前位置。

自定义视频播放器（时间有限，所以仅简要模仿播放/暂停按钮和播放进度条）：

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="player.css"/>
</head>
<body>
<section id="player">
<video id="mmedia" width="720" height="400">
<source src="DATA/oceans-clip.mp4" />
</video>

<nav>

<div id="buttons">
<button type="button" id="play">Play</button>
</div>

<div id="bar" width="600px">
<div id="progress" width="0"></div>
</div>
<div style="clear:both;"></div>
</nav>
</section>
</body>
<script>
var mmedia=document.getElementById("mmedia");
var btn=document.getElementById("play");
btn.οnclick=function(){
if(mmedia.paused){
//视频暂停，播放
mmedia.play();
btn.textContent="Pause";
myProgress();
}else{
//视频播放，暂停
mmedia.pause();
btn.textContent="Play";
clearTimeout(t);
}
}
//控制进度条
var bar=document.getElementById("bar");
var barWidth=parseFloat(window.getComputedStyle(bar).width);

var progress=document.getElementById("progress");
var progWidth;

var widthPerSec;
var t;
function myProgress(){
progWidth=parseFloat(window.getComputedStyle(progress).width);
widthPerSec=barWidth/mmedia.duration;

t=setTimeout("myProgress()",1000);
if(!mmedia.ended){
//控制进度条
if(barWidth-progWidth<widthPerSec){
progress.style.width=barWidth+"px";
}else{
progress.style.width=progWidth+widthPerSec+"px";
}
}else{
clearTimeout(t);
mmedia.pause();
btn.textContent="Play";
progress.style.width=0;
}
}
//点击进度条控制进度
bar.οnclick=function(event){
var x=event.offsetX;
var y=event.offsetY;
progress.style.width=x+"px";
mmedia.currentTime=(x/barWidth)*mmedia.duration;
if(!mmedia.paused){
mmedia.play();
}else{
mmedia.pause();
}
}
</script>
</html>

player.css

body{text-align:center;}
header,section,footer,aside,nav,article,figure,figcaption,hgroup{display:block;}
#player{
width:720px;
margin:20px auto;
padding:5px;
background:#999999;
border:1px solid #666666;

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
nav{margin:5px 0px}
#buttons{
float:left;
width:85px;
height:20px;
}
#bar{
position:relative;
float:left;
width:600px;
height:16px;
padding:2px;
border:1px solid #cccccc;
background:#eeeeee;
}
#progress{
position:absolute;
width:0px;
height:16px;
background:rgba(0,0,150,0.2);
}

简要模仿视频播放器效果：