Video Player Demo导游
  • PDF

Video Player Demo导游

  • PDF

可在Classic/VPC环境下使用。

示例

本说明书介绍了使用播放器的基本事项和简单的设置应用示例。

基本介绍

这是使用默认设置运行播放器的画面。 将显示基本的控制内容。

支持mp4hls格式。

videoplayer_demo_01_zh

    //视频(MP4)
    new ncplayer('video4', {
      playlist: 'https://CDN域/example_video_01.mp4',
    });
    
        

播放多个视频

以下是连续播放多个视频的示例。

可向playlist属性传输连续播放的视频信息。 如果autostartfalse,则不会自动播放下一个视频。

显示“下一个”和“上一个”按钮。

    // 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” 格式指定纵横比。 播放器的尺寸(widthheight)不固定时,应用此功能。

即便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

使用playlistposter属性设置播放视频前显示的图像。

    // 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',
          },
        ],
      },
    ],
    
        

字幕

使用playlistcaptions属性设置字幕文件。

可按照语言设置字幕文件,并以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'
    
        

本文对您有帮助吗?