<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>目前已支持一下浏览器:
|
浏览器 |
MP4 |
WebM |
Ogg |
|---|---|---|---|
|
Internet Explorer |
YES |
NO |
NO |
|
Chrome |
YES |
YES |
YES |
|
Firefox |
YES从 Firefox 21 版本开始Linux 系统从 Firefox 30 开始 |
YES |
YES |
|
Safari |
YES |
NO |
NO |
|
Opera |
YES从 Opera 25 版本开始 |
YES |
YES |
- MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
- WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
- Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
|
属性 |
值 |
描述 |
|---|---|---|
|
autoplayNew |
autoplay |
如果出现该属性，则视频在就绪后马上播放。 |
|
controlsNew |
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
|
heightNew |
pixels |
设置视频播放器的高度。 |
|
loopNew |
loop |
如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
|
mutedNew |
muted |
如果出现该属性，视频的音频输出为静音。 |
|
posterNew |
URL |
规定视频正在下载时显示的图像，直到用户点击播放按钮。 |
|
preloadNew |
auto metadata none |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
|
srcNew |
URL |
要播放的视频的 URL。 |
|
widthNew |
pixels |
设置视频播放器的宽度。 |
以上是基本数属性,可以满足一般性的浏览器使用,但是在使用过程中,比如谷歌浏览器,就会出现各种问题,那么我们就要借助第三方video.css,video.js进行辅助处理问题. video.js的官方地址: https://videojs.com/ 如果你能访问,并且能看到此官网的视频,那么说明您的浏览器已被video.js所支持.
引用原文: Download There are a few ways to get started using Video.js (currently v7.11.4), but you should select the one that best fits your particular use case.
Video.js CDN Our friends at Fastly are nice enough to provide hosting for all the necessary files for Video.js on their content delivery network. Using these hosted files is probably the easiest way to get started using Video.js, you simply need to include the following links in your page.
<head>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
</body>Distributions A Video.js distribution is what you’ll find if you’ve downloaded a release or installed via a package manager.
Video.js/
├── alt
│ ├── video.core.js
│ ├── video.core.min.js
│ ├── video.core.novtt.js
│ ├── video.core.novtt.min.js
│ ├── video.novtt.js
│ └── video.novtt.min.js
├── examples/
├── font
│ ├── VideoJS.svg
│ ├── VideoJS.ttf
│ └── VideoJS.woff
├── lang/
├── video-js-<span class="vjs-version">$LATEST_VERSION$</span>.zip
├── video-js.css
├── video-js.min.css
├── video.cjs.js
├── Video.es.js
├── Video.js
└── video.min.jsThis package includes everything you’ll need to use Video.js on a production site. By default, we bundle Video.js with Mozilla’s excellent VTT.js. If you don’t need VTT.js functionality for whatever reason, you can use one of the Video.js copies that don’t include VTT.js. These have novtt in the name and can be found in the alt/ directory. font/ includes all the generated icon font files from the Videojs Font project. lang/ contains all the generated translation files.
暂无评论内容