保利威文档中心

幫助中心

影片播放

更新時間：2023-12-09 15:34:06

本文將說明影片播放相關功能，包括播放器外觀、控制按鈕以及播放控制等。

初始化播放器

Polyv Web 播放器同時支援 Flash 和 HTML5 兩種播放模式，並可根據終端與瀏覽器環境自動選擇最佳播放模式。預設優先使用 HTML5，在不支援 HTML5 播放的瀏覽器（如較舊版本的 IE 瀏覽器）下會自動切換為 Flash 播放。

程式碼範例：

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
});

player.on('s2j_onPlayStart', () => { //订阅视频开始播放事件
    console.info('视频开始播放');
    player.j2s_seekVideo(60); //视频seek到第60秒
});
</script>
  1. 更多設定功能請參閱：屬性與介面說明。
  2. 可透過 player.isSupportHTML5 檢測目前瀏覽器是否支援 H5 播放。若目前瀏覽器（如 IE9、IE10）不支援 H5，會自動切換為 Flash 播放器。
  3. 請盡量不要修改播放器的樣式或 video 標籤。
  4. 盡量避免在有 animation 和 transform 等 CSS3 屬性的元素或其子元素下初始化播放器，因為這些元素可能導致播放器全螢幕樣式錯亂，這是瀏覽器本身的 bug，敬請見諒。

播放器尺寸設定

播放器的尺寸可透過 width 和 height 兩個參數進行設定。參數支援像素與百分比類型的值。

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: '80%', // 播放器宽，支持像素值和百分比两种类型，默认值为'100%'
    height: '60%', // 播放器高，支持像素值和百分比两种类型，默认值为'auto'
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
});
</script>

若不指定參數 width 的值，播放器寬度會使用預設值：100%，即與父容器寬度一致。

若不指定參數 height 的值，播放器高度會使用預設值：'auto'，即根據影片解析度比例自動調整。

影片切換（連續播放）

目前播放器實例可使用 changeVid 介面切換正在播放的影片。當有多個影片，且上一個影片播放完畢時，自動播放下一部影片也可採用此處理方式。

程式碼範例：

const option = {
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  //autoplay: true,
  //playsafe: '', //PC端播放加密视频需要传playsafe参数
  //sign: '',// 移动端H5播放加密视频需要传 sign、ts参数
  //ts: '', 
  //watchStartTime: 100, // 从第100秒开始播放
  //skipTeaser: false, //切换视频后是否跳过片头直接播放正片
  //ban_seek: 'off', // 是否禁止拖拽进度，值为'on'时将会禁止拖拽进度。
  //ban_seek_by_limit_time: 'off',  // 是否禁止拖拽进度至视频未播放的位置，为'on'时只可在已播放过的进度范围内拖拽（向前拖拽）。
  viewerInfo: { //切换视频时设置观众信息，非必填
        viewerId: '1555313336634', // 观众ID
        viewerName: 'polyv', // 观众昵称
        viewerAvatar: 'https://my.domain.com/user/avatar.png', // 观众头像URL
        viewerExtraInfo1:'', // 自定义额外信息字段1
        viewerExtraInfo2:'', // 自定义额外信息字段2
        viewerExtraInfo3:'' // 自定义额外信息字段3
     }
};
player.on('s2j_onPlayOver', () => {
    console.info('视频播放完毕');
    player.changeVid(option); // 切换下一个视频
});

清晰度切換

影片上傳至保利威雲點播平台後，會轉碼成多個清晰度的影片檔案，詳見影片清晰度與位元率。可透過參數與介面控制清晰度的選擇與切換。

程式碼範例：

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  showHd: true, // 播放器控制栏是否显示清晰度切换的按钮，默认为 true
  show_rate:2, // 允许选择的最高清晰度，取值：{1,2}。值为1时，只显示流畅，值为2时，可选流畅和高清。不设置时会显示全部清晰度。
  df:1  //视频播放默认采用的清晰度，取值：{0,1,2,3}，分别对应自动、流畅、高清、超清。
});
const hd = 3;
player.switchBitrate(hd);// 切换到超清。
</script>

倍速切換

H5 播放器預設開啟倍速播放功能。可透過參數進行自訂控制。

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  //speed:false, //当参数值为boolean类型时，表示是否显示倍速切换的按钮。
  speed: [0.5, 1, 1.25, 1.5, 2] //当参数值为数组时，表示倍速切换的可选速率。最多可设置6个速率，取值范围：(0,3]。PC端默认值为：[2, 1.5, 1.2, 0.5]，移动端默认值为：[1, 1.5, 2]。
});
</script>

線路切換

保利威影片雲擁有多條 CDN 加速線路，當某一條線路出現問題時，可切換至另一條線路。

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    showLine: 'on' // 是否显示线路切换按钮
});
</script>

註：線路切換暫時僅支援在行動裝置 H5 播放器上使用。

影片預覽

在某些情境下，希望只允許觀眾觀看影片的一部分，付費或註冊後才允許觀看完整影片。此情境可透過傳入預覽 vid 或設定參數使用預覽模式來實現。預覽 vid 可透過管理後台的預覽程式碼取得，預覽時長可在點播管理後台進行設定。

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',  
    preview:true // 是否使用预览模式，到达预览时长后会停止播放
});
</script>

當傳入預覽 vid 時，不需要設定 preview 參數。當 preview = true 時，傳入真實 vid 即可。

自訂影片播放的開始/結束時間

播放器支援透過參數指定影片開始/結束播放的時間點。

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    //watchStartTime:10, //播放开始时间，表示视频从第几秒开始播放，参数值需小于视频时长。
    //watchEndTime:60 //播放结束时间，表示视频播放到第几秒结束，设置该值后，只能在开始时间至结束时间范围内进行进度条的拖拽。
    start:10, //截取视频的一部分作为一个独立的视频，如原视频时长60秒，设定start=20后，则视频显示为40秒，并且从原视频的第20秒开始播放。
    end:50,//截取视频的一部分作为一个独立的视频，如原视频时长60秒，设定start=20,end=50后，则视频显示为30秒，并且从原视频的第20秒开始播放，到原视频的50秒结束播放。
});
</script>

續播

播放器預設會記錄影片上次觀看的時間點，在同一瀏覽器中再次開啟播放頁面時，可從上次觀看的時間點繼續播放。

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  history_video_duration: 3, //默认时长超过5分钟的视频才会开启续播功能，可通过此参数修改，单位：分钟。
  ban_history_time: 'off' //当值为’on‘时会禁用续播功能。
});
</script>

播放器只會在影片播放 10 秒後至影片結束 10 秒前的時間段內正常記錄續播點。播放不足 10 秒不續播，播放到最後 10 秒但未播完，續播點在結束前 10 秒，播完後不續播。

自訂播放器外觀與控制項

播放器的外觀以及控制按鈕可透過管理後台的播放器設定或參數進行自訂設定。

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#video',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  skinLocation:1, // 播放器控制栏显示位置：0 不显示，1 视频区域内，2 视频区域外。仅在PC端生效。
  hideSwitchPlayer:true, // 是否隐藏H5和Flash播放器的切换按钮。
  lang:en, // 播放器语言，可选 zh_CN （中文）、 en （英文）
  ban_skin_progress:true, // 是否隐藏视频播放进度条
  showHd: false, // 是否显示清晰度切换的按钮，默认为 true
  speed: false, // 是否显示倍速切换的按钮
  allowFullscreen: false, // 是否允许全屏播放。为false时会隐藏全屏按钮（全屏的API依然可用）。
  screenshot:true, // 是否显示视频截图按钮。仅在PC端生效。
  hideRepeat: true, // 是否隐藏播放结束后的重播按钮。
  fullscreenProxy:true, // 全屏代理，设置后点击全屏按钮或者双击播放器不会调用全屏api，会触发 window.onFullscreenProxy(vid, toFullscreen) 事件，调用者自行做全屏处理，适合在全屏状态下叠加用户自定义的元素。
  full_page_screen:true, // 是否显示网页全屏按钮。需绑定onFullPageScreen事件做对应的处理。
  pictureInPicture:true, // 是否在控制栏显示画中画按钮。仅在PC H5播放器生效，仅在播放非加密视频时生效。
});

player.toggleFullscreen(); // 全屏/退出全屏 切换
player.on('s2j_onFullScreen', () => {
    console.info('播放器进入全屏');
});
player.on('s2j_onNormalScreen', () => {
    console.info('播放器退出全屏');
});
window.onFullscreenProxy = function (vid, toFullscreen) {
  console.log('全屏事件触发:',toFullscreen);
  // 这里添加自定义全屏处理逻辑
}
window.onFullPageScreen = function(v, currentStatus) {
    console.log('页面全屏事件触发：',currentStatus);
    // 这里添加与移除页面全屏相关样式，需调用者添加
    player.toggleFullPageScreen();// 更新播放器页面全屏按钮状态
}
</script>

禁止拖曳進度

在部分教育與培訓情境下，希望強制學員看完影片，不允許拖曳進度。可透過播放器參數進行控制：

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    ban_skin_progress: true, // 是否隐藏播放器控制栏的进度条
    ban_seek:'on',//是否禁止拖拽进度条
    ban_seek_by_limit_time:'on', //是否禁止拖拽进度至视频未播放到的位置，为on时只可在已播放过的进度范围内拖拽（向前拖拽）
});
</script>

Android 系統下各廠商瀏覽器表現不一致，ban_seek 參數可能不生效。

自訂影片封面圖

上傳至雲點播平台的影片會在編碼時進行截圖，預設會採用第一張截圖作為影片封面圖。使用者可在點播管理後台重新選擇或上傳封面圖，也可透過播放器參數進行自訂設定。

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    loading_bg_img: 'https://img.videocc.net/uimage/8/88083abbf5/first_image/2bb92156-e3ac-4781-bdba-483c3213ccd2_b.png', // 封面图URL
    cover_display:'scaleAspectFit', //封面图显示方式
    cover_opacity:70 //封面图蒙层不透明度，取值范围：[0,100]。
});
</script>
联系客服，在线咨询