处理播放器上的源文件或海报

点击下载教程相关资源

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


说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号