Video Player Demo导游
-
打印
-
PDF
Video Player Demo导游
-
打印
-
PDF
可在Classic/VPC环境下使用。
示例
本说明书介绍了使用播放器的基本事项和简单的设置应用示例。
基本介绍
这是使用默认设置运行播放器的画面。 将显示基本的控制内容。
支持mp4、hls格式。
//视频（MP4）
new ncplayer('video4', {
playlist: 'https://CDN域/example_video_01.mp4',
});
播放多个视频
以下是连续播放多个视频的示例。
可向playlist属性传输连续播放的视频信息。 如果autostart为false，则不会自动播放下一个视频。
显示“下一个”和“上一个”按钮。
// NAVER Cloud Platform视频（MP4）
new ncplayer('video1', {
autostart: true, // for test
playlist: [
{ file: 'https://CDN域/example_video_01.mp4' },
{ file: 'https://CDN域/example_video_02.mp4' },
{ file: 'https://CDN域/example_video_03.mp4/index.m3u8' }
],
});
Controls
使用controls属性设置是否显示视频控件。 默认值为true。
//视频（MP4）
new ncplayer('video1', {
controls: false,
autostart: true, // for test
playlist: [
{
file: 'https://https://CDN域/example_video_01.mp4',
},
],
自动播放
使用autostart属性设置是否自动播放。
//视频（MP4）
new ncplayer('video1', {
autostart: true,
playlist: [
{
file: 'https://CDN域/example_video_01.mp4',
},
],
自动播放策略
从用户的角度来看，如果打开网页的同时发出声音或播放视频，可能会感到不舒服。 因此，浏览器会设置为仅在指定情况下自动播放视频。 满足下列条件之一才可以自动播放。
- 静音或音量为0时
- 用户在网页中执行点击、触屏或输入密钥等操作后
- 环境设置中设为白名单页面时
- 支持自动播放的
<iframe>和相应文档
静音
使用mute属性设置是否静音。 默认值为false。
//视频（MP4）
new ncplayer('video1', {
mute: true,
playlist: [
{
file: 'https://CDN域/example_video_01.mp4',
},
],
重复播放
使用refeat属性设置是否重复。 默认值为false。
//视频（MP4）
new ncplayer('video1', {
repeat: true,
playlist: [
{
file: 'https://CDN域/example_video_01.mp4',
},
],
自动停止
使用autoPause属性设置是否自动停止播放器。 默认值为false。
最小化浏览器或切换标签时，将自动停止播放器。 请在运行播放器后尝试最小化窗口。
// NAVER Cloud Platform视频（MP4）
new ncplayer('video1', {
autoPause: true,
playlist: [
{
file: 'https://CDN域/example_video_01.mp4',
},
],
指定比例
使用aspectRatio属性以 “X:Y” 格式指定纵横比。 播放器的尺寸（width、height）不固定时，应用此功能。
即便container的大小发生变化，纵横比也保持不变。
固定比例
//视频（MP4）
new ncplayer('video1', {
aspectRatio: '16:9',
playlist: [
{
file: 'https://CDN域/example_video_01.mp4',
},
],
Width
使用width属性固定播放器的宽度（px）。
// NAVER Cloud Platform视频（MP4）
new ncplayer('video1', {
width: 400,
playlist: [
{
file: 'https://CDN域/example_video_01.mp4',
},
],
Height
使用height属性固定播放器的高度（px）。
// NAVER Cloud Platform视频（MP4）
new ncplayer('video1', {
height: 400,
playlist: [
{
file: 'https://CDN域/example_video_01.mp4',
},
],
调整播放速度
使用playbackRate属性调整视频的播放速度。 如果未指定，默认值为1.0。
该值小于1.0时，播放速度变慢，大则变快。
//视频（MP4）
new ncplayer('video1', {
autostart: true, // test
playbackRate: 0.5,
playlist: [
{
file: 'https://CDN域/example_video_01.mp4',
},
],
poster
使用playlist的poster属性设置播放视频前显示的图像。
// NAVER Cloud Platform视频（MP4）
new ncplayer('video1', {
playlist: [
{
file: 'https://CDN域/example_video_01.mp4',
poster: 'https://CDN域/example_video_01.png',
},
],
调整画质
调整视频分辨率。
如果是ABR（Adaptive bitrate）格式的hls视频，则会根据用户的网络状态自动决定初始分辨率。
//视频（VOD Station - HLS）
new ncplayer('video3', {
playlist: [
{
autostart: true, // for test
file: 'https://CDN域/hls/abr2/vod-,5400,2400,1200,900,720,k.mp4.smil/master.m3u8',
},
],
如果无法使用和hls相同的格式，则可以列出不同画质的视频文件后，使用播放器中的分辨率设置菜单。
在这种情况下，无法使用基于带宽或下载速度的自动切换功能。
可以使用default属性指定初始分辨率，如果未指定，则播放初始分辨率的视频。
//视频（MP4）
new ncplayer('video1', {
playlist: [
{
autostart: true, // for test
sources: [
{
file: 'https://CDN域/1080p.mp4',
label: 'FHD',
default: true,
},
{
file: 'https://CDN域/720p.mp4',
label: 'HD',
},
{
file: 'https://CDN域/320x240.mp4',
label: 'SD',
},
],
},
],
字幕
使用playlist的captions属性设置字幕文件。
可按照语言设置字幕文件，并以default值指定初始值。
[参考] 视频中已包含字幕时，无法设置显示选项，存在单独的字幕文件时才可以进行设置。
当前ncplayer只提供WebVTT格式的字幕。
// 视频（MP4）
new ncplayer('video1', {
playlist: [
{
file: 'https://CDN域/example_video_01.mp4',
captions: [
{
file: 'https://CDN域/example_video_01.vtt',
label: '韩语',
language: 'ko',
default: true,
},
{
file: 'https://CDN域/example_video_01_en.vtt',
language: 'en',
label: '英语',
},
]
},
],
右键菜单
使用about属性可变更播放器右键菜单链接和文本。
如果不使用该属性，则默认提供NAVER Cloud Platform文本和快捷方式。
//视频（MP4）
new ncplayer('video1', {
about: {
link: 'https://www.naver.com',
text: 'NAVER'
},
playlist: 'https://CDN域/example_video_01.mp4'
本文对您有帮助吗？