VideoJs使用总结

adam1q84 发布于2019-08-23 14:54 / 1931人阅读

摘要：简介是用于视频播放的的库。官方文档使用方法控制条修改指向播放器已经准备好了播放结束了常用配置示例启用控制条隐藏重播图标竖直的音量控制隐藏播放进度控制事件监控播放结束播放中扩展插件视频列表管理视频列表显示

VideoJs简介

VideoJs是用于视频播放的javascript的库。

官方文档

使用方法

var player = videojs("player", {
    controls: true, //控制条：boolean
    controlBar: {
        playToggle: {
            replay: false
        },
        progressControl: false
    }
}, function onPlayerReady() {
    // 修改this指向
    var vdthis = this;
    videojs.log("播放器已经准备好了!");

    //this.play();

    this.on("ended", function() {
        videojs.log("播放结束了!");
    });
});

常用配置

Player
├── MediaLoader (has no DOM element)
├── PosterImage
├── TextTrackDisplay
├── LoadingSpinner
├── BigPlayButton
├─┬ ControlBar
│ ├── PlayToggle
│ ├── VolumePanel
│ ├── CurrentTimeDisplay (hidden by default)
│ ├── TimeDivider (hidden by default)
│ ├── DurationDisplay (hidden by default)
│ ├─┬ ProgressControl (hidden during live playback)
│ │ └─┬ SeekBar
│ │   ├── LoadProgressBar
│ │   ├── MouseTimeDisplay
│ │   └── PlayProgressBar
│ ├── LiveDisplay (hidden during VOD playback)
│ ├── RemainingTimeDisplay
│ ├── CustomControlSpacer (has no UI)
│ ├── PlaybackRateMenuButton (hidden, unless playback tech supports rate changes)
│ ├── ChaptersButton (hidden, unless there are relevant tracks)
│ ├── DescriptionsButton (hidden, unless there are relevant tracks)
│ ├── SubtitlesButton (hidden, unless there are relevant tracks)
│ ├── CaptionsButton (hidden, unless there are relevant tracks)
│ ├── AudioTrackButton (hidden, unless there are relevant tracks)
│ └── FullscreenToggle
├── ErrorDisplay (hidden, until there is an error)
├── TextTrackSettings
└── ResizeManager (hidden)

示例

let player = videojs("myplayer", {
  controls: true, //启用控制条：boolean
  controlBar: {
    // 隐藏重播图标
    playToggle: {
      replay: false
    },
    // 竖直的音量控制
    volumePanel: {
      inline: false
    },
    // 隐藏播放进度控制
    progressControl: false 
  }
});

事件监控

// 播放结束
this.on("ended", function(e) {}
// 播放中
this.on("timeupdate", function(e) {}

扩展插件

视频列表管理 videojs-playlist

player.playlist([{
    name: "01",
    sources: [{
        src: "http://media.w3.org/2010/05/sintel/trailer.mp4",
        type: "video/mp4"
    }],
    poster: "http://media.w3.org/2010/05/sintel/poster.png"
}, {
    name: "02",
    sources: [{
        src: "http://media.w3.org/2010/05/bunny/trailer.mp4",
        type: "video/mp4"
    }],
    poster: "http://media.w3.org/2010/05/bunny/poster.png"
}, {
    ....
}]

视频列表UI显示 videojs-playlist-ui

player.playlistUi({
    el: document.getElementById("playList")
});

云服务器 GPU云服务器使用方法总结 videojs videojs cdn 年终总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101314.html

videojs 播放无法通过URI确定格式的视频源(flv/mp4)

摘要：结果跑起来发现原来里面同时存在格式视频，并且原来线上的视频是播不了的，并且在上是没有体现的，并且是一个项目我不会，并且没有源码，我的内心全是草拟马。代码很简单，首先支持播放，其次出错时切换资源。前言前人坑我千百遍我待前人如初恋。最近公司开源节流搬机房，需要把原来的服务迁移，然后屁颠屁颠的把一个跑了几年没人管的视频网站（知道这个网站的人都走了）迁移到新的机房去。结果跑起来发现原来里...

chavesgu 2019-08-02 10:51 评论0 收藏0
webpack与video.js一同使用的一些坑

摘要：是一个优秀的视频播放器库，不过官网的示例中，是作为全局变量引入的。如果我们的项目使用风格的模块，用来做打包的话，就需要做一些额外的工作。本文介绍我在使用的时候遇到的一些坑。这个是用来处理文件的。第二种方法是使用，直接把全局变量暴露出来。 video.js是一个优秀的视频播放器库，不过官网的示例中，是作为全局变量videojs引入的。如果我们的项目使用ES6风格的模块，用webpack来...

MorePainMoreGain 2019-08-20 12:32 评论0 收藏0
videojs--跨浏览器的HTML视频播放器（可自定义样式）

摘要：官网写在前面，为什么选择这个播放器，因为有文档，支持添加插件，很方便自定义样式，比较活跃，有各种解决方案等不过没想到有那么多坑最简单的静态页面使用方法动态插入时初始化方法或者或者更多详细使用方法请查看官方文档常见问官网写在前面，为什么选择这个播放器，因为有文档，支持添加插件，很方便自定义样式，比较活跃，github有各种bug解决方案等不过没想到有那么多坑最简单的静态页面使用方法...

klinson 2019-08-22 11:01 评论0 收藏0
video.js 源码分析（JavaScript）

摘要：语法部分采用的是标准。那么整个播放器是怎么把播放器的加载到中的呢在的构造函数里可以看到先生成，然后初始化父类遍历属性，将中的类实例化并将对应的嵌入到的属性中，最后在的构造函数中直接挂载到标签的父级上。 video.js 源码分析（JavaScript）组织结构继承关系运行机制插件的运行机制插件的定义插件的运行控制条是如何运行的 UI与JavaScript对象的...

Neilyo 2019-08-29 11:24 评论0 收藏0
video.js 源码分析（JavaScript）

摘要：语法部分采用的是标准。那么整个播放器是怎么把播放器的加载到中的呢在的构造函数里可以看到先生成，然后初始化父类遍历属性，将中的类实例化并将对应的嵌入到的属性中，最后在的构造函数中直接挂载到标签的父级上。 video.js 源码分析（JavaScript）组织结构继承关系运行机制插件的运行机制插件的定义插件的运行控制条是如何运行的 UI与JavaScript对象的...

simpleapples 2019-08-21 14:35 评论0 收藏0