video相关参数、操作和事件-CSDN博客

本文介绍了HTML5 video标签的使用，包括如何设置参数，如src、preload和autoplay等，以及操作如全屏伪类和media方法属性。同时，文章还提及了与audio标签相关的属性，并总结了HTMLVideoElement和HTMLAudioElement的事件。

摘要由CSDN通过智能技术生成

1.参数

　　video是h5的新特性（虽然新了很多年了），使得枯燥的页面有了很多生机。html代码示例：

 1 <video
 2     id="kingdom-video"
 3     src=""
 4     preload
 5     controls>
 6     </video>
 7 <video width="320" height="240" controls>
 8  <source src="/example/video/movie.mp4" type="video/mp4">
 9  <source src="/example/video/movie.ogg" type="video/ogg">
10  您的浏览器不支持Video标签。
11 </video>

　　可见，可以直接通过src指定播放媒体的网络路径，也可以使用source标签来进行指定。

　　常用参数如下：

//autoplay 则视频在就绪后马上播放。

//controls 用户显示控件，比如播放按钮。

//width 频播放器的宽度。

//height 设置视频播放器的高度

//loop 文件完成播放后再次开始播放。

//preload 视频在页面加载时进行加载，并预备播放

// src 要播放的视频的 URL。

2.操作

　　常用操作如下：

var myVid=document.getElementById("video1"); //获取video 元素 myVideo.play(); //播放视频 myVideo.pause(); //暂停视频 myVideo.width=560; //设置视频宽度 myVideo.height=560; //设置视频高度

全屏：

chrome

document.getElementById('video1').webkitRequestFullScreen()
document.webkitCancelFullScreen();

Firefox

document.getElementById('video1').mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C 提议

document.getElementById('video1').requestFullscreen();
document.exitFullscreen();

【css伪类】

:fullscree