点击下载教程相关资源
通过 API 向播放器传递源文件，也可使用选项来实现。例如：
var myPlayer = videojs('some-player-id');
// 通过 API 方法向播放器传递源文件
myPlayer.src('http://www.example.com/path/to/video.mp4');如果提供的源文件（source）是字符串，Video.js 会尝试从文件扩展名推断视频类型。但这种推断并非在所有情况下都有效，建议将源文件（source）作为包含文件类型的对象提供，如下所示：
Source 对象（或元素）： 一个包含源文件信息的 javascript 对象。如果希望播放器使用类型信息来判断是否支持该文件，请使用此方法：
var myPlayer = videojs('some-player-id');
// 通过 type 字段指定类型为 mp4
myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});Source 对象数组：要提供多个版本的源文件，以便在不同浏览器中使用 HTML5 播放，您可以使用 source 对象数组。Video.js 会检测支持哪个版本，并加载该文件。 例如：
var myPlayer = videojs('some-player-id');
// 同一个视频文件执行了 mp4、webm、ogg 类型的视频文件
myPlayer.src([
{type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'},
{type: 'video/webm', src: 'http://www.example.com/path/to/video.webm'},
{type: 'video/ogg', src: 'http://www.example.com/path/to/video.ogv'}
]);通过 API 更改或设置海报，这也可以通过选项完成。例如：
var myPlayer = videojs('example_video_1');
// 设置海报
myPlayer.poster('http://example.com/myImage.jpg');
// 获取海报
console.log(myPlayer.poster());
// 'http://example.com/myImage.jpg'完整示例：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js</title>
<!-- 引入 Video.js 样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- 如果您想支持 IE8（适用于 v7 之前的 Video.js 版本） -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<div id="container">
<video id="vid1"
data-setup='{"preload":"auto","controls":true,"width":"640","height":"264px"}'>
</video>
</div>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
let player = videojs('vid1');
// 设置源文件
player.src([
{type: 'video/mp4', src: '../resources/oceans.mp4'},
{type: 'video/webm', src: '../resources/oceans.webm'}
]);
// 设置海报
player.poster('../resources/oceans.jpg');
</script>
</body>
</html>
川公网安备51010802032098