Light

pong420 / videojs-plus Goto Github PK

View Code? Open in Web Editor NEW

58.0 5.0 23.0 14.33 MB

An extension and skin for video.js

Home Page: https://pong420.github.io/videojs-plus/docs

License: Apache License 2.0

JavaScript 68.97% SCSS 31.03%

video player videojs videojs-plugin videojs-skin videojs-extension react-video-player

videojs-plus's Introduction

VideoJS Plus

VideoJS Plus is an extension and skin for video.js.

Documentation

Installation

npm install videojs-plus
# or
yarn add videojs-plus

Usage

Include the correspone JS and CSS and

<html>
  <head>
    <link rel="stylesheet" href="videojs-plus.css" />
  </head>
  <body>
    <video
      id="example-video"
      class="vjs-fluid"
      poster="http://vjs.zencdn.net/v/oceans.png"
    >
      <source src="http://vjs.zencdn.net/v/oceans.mp4" />
    </video>
  </body>
  <script src="http://vjs.zencdn.net/7.4.1/video.js"></script>
  <script src="videojs-plus.umd.js"></script>
  <script>
    const player = videojs('example-video');
  </script>
</html>

React Hooks

License

See Apache 2.0.

videojs-plus's People

Contributors

Stargazers

Watchers

videojs-plus's Issues

Make the setting menu auto resize from the init

Hi, Pong420

videojs-plus/source/Components/SettingMenu/SettingMenu.js

Line 22 in 3d5d781

const { offsetWidth: width, offsetHeight: height } = this.contentEl_;

offsetWidth and offsetHeight In some browsers, some lengths may be ignored (If zoom).

videojs-plus/source/Components/SettingMenu/SettingMenu.js

Line 24 in 3d5d781

this.mainMenuItems = this.children().slice(0);

That mainMenuItems has been set, why not use transform directly.

Like this:

videojs-plus/source/Components/SettingMenu/SettingMenu.js

22|    this.mainMenuItems = this.children().slice(0);
23|
24|    this.transform(this.mainMenuItems);

How to build from source

Hi, I want to build from source, but I have no experience with yarn

What do I have to do?

Add more features

Hello,

Great job, could you add fast forward buttons option and keyboard shortcuts and animated actions like pause or play

I hope you do that.

Thanks.

Windows 10 browser compatibility

Hi, Pong420

On Windows Chrome .vjs-workinghover Does not load as expected,

Compare (Use page:https://pong420.github.io/videojs-plus/examples/base.html) :

Windows Google Chrome (Version 86.0.4240.111 (Official Build) (64-bit)) :

Ubuntu Google Chrome (Version 86.0.4240.111 (Official Build) (64-bit)) :

I also tested Mac Google Chrome and it seems that only Windows Google Chrome has problems

This causes the css that depends on .vjs-workinghover to fail to execute as expected.

Add multiple subtitles

Hello,
I am trying to add multiple subtitles,
When I only add one subtitle, this is working:

const subtitles = [
  {
    default: true,
    kind: 'subtitles',
    srclang: 'ja-JP',
    label: '日文',
    src: 'https://MyDomain/JP.txt'
  }
]
player.subtitles().load(subtitles);

But when I try to add multiple subtitles, like this:

const subtitles = [
  {
    default: true,
    kind: 'subtitles',
    srclang: 'ja-JP',
    label: '日文',
    src: 'https://MyDomain/JP.txt'
  },
  {
    default: false,
    kind: 'subtitles',
    srclang: 'zh-TW',
    label: '中文（繁體）',
    src: 'https://MyDomain/TC.txt'
  }
]
player.subtitles().load(subtitles);

It can be loaded normally,
But the subtitle option in the menu is no longer valid, Can't close or switch subtitles,
The preset subtitles must be pressed once to work properly.
No output from the console.

Effect demo:

Chromecast suppport

Hello,

This extension is awesome. Thanks for creating this. :D

Get playback rate range array API requests

Hi,

How (or can) get an array of playback rate ranges?

videojs-plus/source/Components/SettingMenu/PlaybackRate/PlaybackRateSettingItem.js

Lines 11 to 22 in 9ea5856

    
           entries: [ 
        
             0.5, 
        
             0.75, 
        
             { 
        
               label: 'Normal', 
        
               value: 1, 
        
               default: true 
        
             }, 
        
             1.25, 
        
             1.5, 
        
             2 
        
           ]

I tried to use player options, but it didn't work:

Thx

After resizing the window, Menu back button is invalid

Hello,
After adjusting the window size, the sub-setting menu cannot go back to the main setting menu.

Effect demo video (效果演示影片 28秒):

8-4-2020.mp4 (28s)

GitHub Pages demo

html:
https://ami-os.github.io/videojs-plus-demo/index.html

file:
https://github.com/Ami-OS/videojs-plus-demo

In fact, this problem also existed half a year ago.
I just remembered.

The subtitle setting'default' seems to be necessary, otherwise an error will be reported

reference: https://github.com/Pong420/videojs-plus/blob/master/guide/plugins/Subtitles.md

default: true, // Boolean, Optional

My setting:

const subtitles = [
  {
    kind: 'subtitles',
    srclang: 'zh-TW',
    label: '中文（繁體）',
    src: 'URL/subtitle/TC.txt'
  },
];

Just when I tried to switch subtitles, the console outputs the following error message:

video.min.js:12 VIDEOJS: ERROR: TypeError: Cannot set property 'mode' of null
    at subtitles.pick (Subtitles.js:114)
    at SubtitleSettingMenuItem.onChange (SubtitleSettingMenuItem.js:53)
    at SettingSubOptionItem.handleClick (SettingSubOptionItem.js:25)
    at HTMLLIElement.o.dispatcher.o.dispatcher (video.min.js:12)
(anonymous) @ video.min.js:12
n.error @ video.min.js:12
o.dispatcher.o.dispatcher @ video.min.js:12

Screenshot:

Must set 'default' and not 'false'
Will work properly !

default: true,

My environment:

video.js               7.6.5
videojs-plus.umd.js    1.6.0
subtitles/index.js     1.6.0

Subtitle plugin API requests

Hi, i need to get some values from Subtitle plugin to implement some functions, but the existing api cannot get the value I need (Or i don't know),
help ~~

I need to get the following value or status :

[status] Whether subtitles are on or off
[value] Get current subtitles index id (Is what pick(index) Really needed)
[value] Get default subtitles index id (default: true)

player.subtitles().track corresponding index id, for use player.subtitles().pick(index);

Thx

Subtitle Settings

Hello,

Is there any plugins that allow the user to change the subtitle's font/style/etc.

HSL stream Not working on mobile chrome android

VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) The media playback was aborted due to a corruption problem or because the media used features your browser did not support. MediaError {code: 3, message: "The media playback was aborted due to a corruption…media used features your browser did not support."}

imports:

import videojs from 'video.js';
import 'videojs-contrib-hls';
import 'videojs-plus';
import 'videojs-plus/dist/plugins/live';
import 'videojs-plus/dist/plugins/live/style.css';
import 'videojs-plus/dist/videojs-plus.css';

Trying to stream an m3u8 file does not work for mobile chrome on android.

Desktop browser works fine.

Main setting menu will not Auto-Responsive

The main menu seems to only initialize the width when the page loads, and main menu width will not automatically change thereafter, sub-menu but will do.

The following line have been deleted or overwritten in advance:

videojs-plus.css::line:1027

.vjs-menu .vjs-menu-content .vjs-menu-item.vjs-setting-onoff-item, .vjs-menu .vjs-menu-content .vjs-menu-item.vjs-setting-menu-item {
  width: 16.07143em; }

To:

.vjs-menu .vjs-menu-content .vjs-menu-item.vjs-setting-onoff-item, .vjs-menu .vjs-menu-content .vjs-menu-item.vjs-setting-menu-item {
  width: 100%; }

Test environment setup:

const subtitles = [
  {
    default: true,
    kind: 'subtitles',
    srclang: 'zh-TW',
    label: '中文（繁體）中文（繁體）中文（繁體）中文（繁體）',
    src: 'URL/subtitle/TC.txt'
  },
];
player.subtitles().load(subtitles);

Result:

But if it is closed during initialization,
environment setup:

const subtitles = [
  {
    kind: 'subtitles',
    srclang: 'zh-TW',
    label: '中文（繁體）中文（繁體）中文（繁體）中文（繁體）',
    src: 'URL/subtitle/TC.txt'
  },
];
player.subtitles().load(subtitles);

Result:

There is another problem. When the menu is in mobile ui mode, if you open the sub-menu and revert to desktop ui mode, the width of the menu is not updated and the menu needs to be triggered again to return to normal.

Result:

populating qualities for adaptive streaming

Description

Hello,
I am trying to populate the quality list for hls.
I included videojs-contrib-quality-levels plugin and according to the instruction: https://github.com/Pong420/videojs-plus/blob/master/guide/plugins/QualityHls.md
It should populate itself automatically, right? But it's not working for me.
How should i connect the quality levels to the QualityMenuItem's entries
https://github.com/Pong420/videojs-plus/blob/master/guide/SettingMenu.md

After using the hls plugin, the video speed control button is invalid on Android devices

Hello,

When using the hls plug-in, the movie speed control button is reset, and after selecting the playback speed, the movie speed does not change (only the android device has this problem)

And this happens only when the hls plugin is used (only the android device has this problem)

demo video (github does not support large file upload):
https://www.youtube.com/watch?v=TG6EN_utoCk

This problem can be found in the demo:
https://pong420.github.io/videojs-plus/examples/quality-hls.html

The problem only appears when using the hls plugin (only the android device has this problem):

Demo

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

	entries: [
	0.5,
	0.75,
	{
	label: 'Normal',
	value: 1,
	default: true
	},
	1.25,
	1.5,
	2
	]

pong420 / videojs-plus Goto Github PK

videojs-plus's Introduction

VideoJS Plus

Installation

Usage

License

videojs-plus's People

Contributors

Stargazers

Watchers

Forkers

videojs-plus's Issues

Compare (Use page:https://pong420.github.io/videojs-plus/examples/base.html) :

Hello, After adjusting the window size, the sub-setting menu cannot go back to the main setting menu.

Effect demo video (效果演示影片 28秒):

GitHub Pages demo

html: https://ami-os.github.io/videojs-plus-demo/index.html file: https://github.com/Ami-OS/videojs-plus-demo

The subtitle setting'default' seems to be necessary, otherwise an error will be reported

I need to get the following value or status :

Main setting menu will not Auto-Responsive

The following line have been deleted or overwritten in advance:

Description

Demo

Recommend Projects

Recommend Topics

Recommend Org

Hello,
After adjusting the window size, the sub-setting menu cannot go back to the main setting menu.

html:
https://ami-os.github.io/videojs-plus-demo/index.html

file:
https://github.com/Ami-OS/videojs-plus-demo