搜狐视频播放器开辟文档

内部文档,管理员莫引荐:)

形貌

只需引入一个JS文件并设置简朴几个参数,就能够在任何第三方网页挪用搜狐视频的播放器。

功用

  1. 支撑HTML5和Flash播放;
  2. 支撑传入视频源地点(mp4或m3u8)播放;
  3. 支撑连播;
  4. 支撑播放器一些简朴事宜;
  5. 支撑设置播放器宽高。

运用

搜狐消息H5版中挪用

挪用

引入JS文件会建立一个名为SohuMobilePlayer的“类”,前端在挪用时只需实例化这个“类”即可,详细挪用要领以下:

经由过程视频vid建立播放器

var player = new SohuMobilePlayer(id, vid, channeled);

var player = new SohuMobilePlayer(id, {
  vid: 1261122,
  isAutoPlay: true
}, channeled);

参数申明:

  • id:播放器容器的id ,String,必需
  • vid:视频的vid,Number || String,必需
  • isAutoPlay:是不是自动播放,可选,Boolean || String,默以为'auto'
  • channeled:视频的channeled,Number || String,可选

vid是搜狐视频播放源的唯一ID,能够在搜狐视频播放页中找到。
channeled是搜狐视频分派的用于统计的渠道号,假如没有能够不填。

isAutoPlay的值有true, false,wifi, 'auto'四个:
1. true: 悉数自动播放
2. false: 悉数不自动播放
3. wifi: wifi情况下自动播放(只要部份Android机型支撑)
4. 'auto': 默许的自动播放逻辑

经由过程传入视频源地点建立播放器

var player = new SohuMobilePlayer(id, {
  mp4: 'http://test.com/1.mp4',
  m3u8: 'http://test.com/1.m3u8',
  poster: 'http://test.com/1.jpg',
  width: 320,
  channeled: 1122290,
  title: "新浪科技:搜狐视频全资收买爱奇艺",
  adClose: 1
});

参数申明:

  • id:播放器容器的id (String, 必需)
  • mp4:视频mp4源地点 (Array,可选)
  • m3u8:视频m3u8源地点 (Array,可选)
  • poster:播放器封面图 (String, 可选)
  • width:播放器高度 (Number,可选)
  • title:视频题目 (String,可选)
  • channeled:视频的channeled (Number || String,可选)
  • adClose: 是不是禁播广告,默以为0不制止(Number,可选)。

mp4和m3u8地点最少传一种。

连播

经由过程传入vid数组完成连播

var player = new SohuMobilePlayer(id, {
  vid:[vid1, vid2, ...]
});

经由过程传入视频源数组完成连播

var player = new SohuMobilePlayer(id, {
  mp4: ['http://test.com/1.mp4', 'http://test.com/2.mp4'],
  m3u8: ['http://test.com/1.m3u8', 'http://test.com/2.m3u8'],
  poster: ['1.jpg','2.jpg'],
  title: ['Title1', 'Title2']
});

要领

支撑播放和停息两种要领:

  player.play();
  player.pause();

事宜

  player.on(type, callback);

参数申明:type(String)为事宜范例,callback(Function)为事宜触发时得回调。

举例

player.on('pause', function() {
  console.log('hey, I have paused!');
});

范例

临时只支撑五种事宜范例:

  • ready:视频数据预备完成;
  • play:最先播放;
  • pause:停息播放;
  • playing:正在播放;
  • end:播放住手。

属性

player.status

返回播放器的状况,有三个值:

  • playing: 正在播放;
  1. pause:播放停息;
  2. end:播放住手。

Bonus

连播,要领,事宜,属性只存在于HTML5播放。

    原文作者:binnng
    原文地址: https://segmentfault.com/a/1190000000371396
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞