The embed currently has its own responsive container and is not filling the "Vime" container because the transparent embed option is missing.

The ability to minimize the player and attach it to one of the corners of the window or maybe it'll be free floating? Not sure yet.

Source: https://github.com/vime-js/vime/blob/master/packages/vime-utils/src/load.js#L40

At this time if multiple players are loaded at the same time and they require calling load_library such as HLS and Dash do when loading the SDK's, it will result in multiple downloads. This is obviously bad.

Sorry if it is buried somewhere in the documentation, but I did not find any way to attach event listeners to the player state like onend (I'm embedded YouTube videos). I tried using the player.$on('data') event listener as described in the docs, but for YouTube embeds, it never fires the callback - I'm not using any sendCommand

Let me know what is the current state for that. Thanks!

• Utils Package - Unit Tests
• Core Package - Unit Tests
• Lite Package - Unit/Structural/Visual/E2E Tests
• Standard Package - Unit/Structural/Visual/E2E Tests
• Complete Package - Unit/Structural/Visual/E2E Tests

Visual and E2E tests can be performed using Puppeteer + Storybook.

ref: https://storybook.js.org/docs/testing/automated-visual-testing/#custom-solutions

Would that be helpful to have a opensource video player with support of RTMP protocol ?

May this issue affected to other project ?

Regards

Great project! Would love to see some support for SSR frameworks like Svelte's Sapper. At the moment I can't find a way to get the standard or complete versions to work, as importing them in Svelte causes crashes due to attempts to access document and window when they are still unavailable (when rendering server-side).

The only thing that works right now is using @vime-js/lite imported from the @vime-js/standard installation. Interestingly, using lite when installed on its own does not work either.

Hi there,

I'm wondering if it's possible to pass parameters to the player like :

• rel = 0
• showInfo = 0
• ...

See https://developers.google.com/youtube/player_parameters#Parameters

Thanks for your help.

A requested feature by a Svelte community member. Creating an issue so others can request any additional HLS related features.

I haven't look into the extent of work needed here but I assume most things are broken.

If I change the src property (maybe specifically from an object to another object) it causes the tooltips to position incorrectly.

I'm importing Vime as follows

<script>
	  import { Player as VideoPlayer, FileProvider } from '@vime-js/standard'
</script>

<VideoPlayer src='https://qa.adaptive.delivery/api/v2/v/beyonk/q/site-assets/homepage-video.mp4' poster='https://qa.adaptive.delivery/api/v2/i/beyonk/q/site-assets/card/homepage-video.jpeg' providers={[ FileProvider ]} paused={false} autoplay={true} useNativeControls={false} loop={true} aspectRatio='16:9.6' />

And it seems like the loop attribute isn't getting passed to the video element (it's possible that you do the loop via javascript, so in that case, it's just not working at all.

Ref: Adding an AirPlay Button to Your Safari Media Controls

This will probably be done at a later time but it would be cool. Need some references and to look into this.

• Creating a Control Guide
• Creating a Plugin Guide
• Creating a Provider Guide
• Custom Controls Guide
• Custom Settings Guide
• How Plugins Work

Vime 2.0

Introduction

This "issue" is to layout my thoughts and plans for Vime 2 and for any community feedback. I'd love to hear from people who've actually tried Vime 1 and what they thought (especially what they hated), and what they'd love to see in a media player library.

In all honesty it was my first-time building out a "larger" front-end library. I did it at first because I needed the player for another project and I wasn't happy with existing solutions by modern standards. That motivation slowly transformed into me loving the JS ecosystem and exploring it. I think as most do, I made a lot of mistakes and over-complicated the library on my "first attempt" (not counting few rewrites). Looking back on it now I just keep shaking my head haha. I plan to remedy those mistakes in the next release.

Work will commence on the v2 branch.

Goals

1. Improved developer experience interacting with the library as a consumer and contributor.

2. Maintain great end-user experience by focusing on: aesthetics, accessibility, i18n and UI responsiveness.

3. Component/s API simplification and closer to native DOM implementation (Eg: Subscriptions -> Events).

4. Maintain customization and configuration but in a much simpler form.

5. Make the library easier to maintain.

Plan

Foundation

I think one move that would actually hit all my goals is migrating from Svelte to Stencil. This will provide us with:

• Easier maintenance. Project compilation/bundling out of the box, auto-gen docs, built-in TS support, lazy-loading, polyfilling etc.

• Reusability/integrations. Web Components are a native DOM solution to building reusable components. It's widely supported today by browsers and frameworks. In addition, Stencil specifically has solutions/guides for integrating with frameworks.

• TypeScript + JSX. There is no need to dig into the benefits TS brings to a collaborative workspace and shipping a package/library because it's been written about a million times. My personal experience on a few projects confirms it. Also TS + JSX work seamlessly together in contrast to SFCs or native HTML.

• Testing. Unit + E2E testing solution built-in.

• Dev server with hot reloading. Comes with an integrated dev server in order to simplify development.

To elaborate a little more ... Svelte is built to be general purpose. It's not aimed specifically at building applications (Sapper aims to solve this part), nor libraries. It's easy to adopt/learn and just get shit done with. These are all reasons to absolutely love it but it also means it's not made for all use cases. It doesn't cover the tedious elements of maintaining a library of which some are mentioned above. TypeScript support is also poor and probably always will be because of the nature of the library + SFCs, similarly to how it feels hacky or unnatural in Vue.

I really really enjoyed Svelte but in a simple trade-off I have to let it go for now :( But ... it's not all bad news! Lucky for us Svelte has complete web component support!

Browsers

The following browsers will be supported:

• IE 11
• Safari
• Mobile Safari
• Firefox
• Chrome
• Opera
• Edge

Existing Packages

I think all the separate packages, names and features in Vime 1 are confusing. All existing packages will be merged into a single package called @vime/core.

• @vime-js/preview will be axed. For the general consumer of this library, this component seems unnecessary and it can be easily achieved without our help.

• @vime-js/lite will become provider specific versions such as the vime-lite-youtube component exported from the @vime/core package. @vime-js/lite will be axed to simplify the library and because the effort-reward ratio was too little. It was only going to shave off at most 5-10 kB off the full version and provide a super bare bones API that was probably going to suck.

• @vime-js/standard and @vime-js/complete will be merged to become the vime-player component exported from the @vime/core package.

• @vime-js/core and @vime-js/utils will now live inside the @vime/core package.

Core API

The core API will be available on the root media player component vime-player which is exported from @vime/core and it will reside in packages/core.

• The API will closely match the HTMLMediaElement API.

• The core design will prefer passing additional complex props via child components.

The following props will also be included:

• isFullscreenActive
• isPiPActive
• canAutoplay
• canMutedAutoplay
• aspectRatio
• canSetFullscreen
• hasPlaybackStarted
• hasPlaybackEnded
• mediaType
• isAudio, isVideo and isLive

The following methods will also be included:

• canSetPiP, requestPiP and exitPiP
• requestFullscreen and exitFullscreen

Example

<vime-player>
 <!-- ... --->
</vime-player>

Providers

All providers will follow the convention vime-provider-x (vime-provider-youtube) for the core provider and vime-lite-x (vime-lite-youtube) for an embed. They will be exported from @vime/core and reside in packages/core.

• Providers will be implement the MediaProvider interface.
• They are responsible for actually rendering the media and controlling playback.
• Unlike Vime 1, normalization will occur in each provider instead of attempting to normalize the differences globally. This caused a lot of headaches in Vime 1 and was very easy to break.
• The lite version of a provider is only available for embedded media and it should extend the Embed component and implement the MediaLiteProvider interface.
• Embedded media should always attempt to extend the lite version of the provider.

A more detailed specification should exist in the future for the provider interface.

Examples

<vime-player>
  <vime-provider-youtube videoId="1y2xOj4QN6Q" />
</vime-player>

Plugins

All plugins will follow the convention vime-plugin-x (vime-plugin-localstorage). They will be exported from @vime/core and reside in packages/core.

• The registry will be simplified and have a well-defined lifecycle. Something simple like mount -> register -> attach -> detach -> deregister -> unmount.
• Plugins will implement the Plugin interface.
• They will not include any visuals and simply extend the functionality of the player. For example a vime-plugin-chromecast plugin might add a cast method to the root media player.

Example

<vime-player>
  <vime-plugin-chromecast />
</vime-player>

UI Customization

All UI components will follow the convention vime-x (vime-controls). They will be exported from @vime/core and reside in packages/core.

Example

<vime-player>
  <!-- ... -->

  <vime-controls>
     <vime-control icon="play.svg" />
  </vime-controls>
</vime-player>

Integrations

Seperate packages for each integration will be exported from @vime/x (@vime/react) and reside in packages/x (packages/react).

Vime 2 will aim to support the following environments with the help of Stencil:

• JavaScript
• Svelte
• Preact
• React
• Vue
• Stencil
• Angular
• Ember

Testing

All components will be tested. E2E tests will be preferred over unit tests but we'll see. I'm interested in creating a test harness to ensure all providers follow a strict flow of events when playing media, seeking etc.

Site

• The playground will be removed in Vime 2.
• Introduction and Getting Started documentation pages will be removed.
• The documentation will move from GitBook to most likely Docusaurus.
• The home page of the site will contain code snippets with feature previews.
• Thanks to Stencil all the API documentation will be auto-generated for all components. We can focus on writing up any necessary guides such as a quickstart, creating your own controls, creating a provider, creating a plugin, integration guides and so on.
• Comparisons and reviews of Plyr and Video.js will be removed.

References

• #16
• #5
• #42
• #46
• #47
• #48
• #23
• #56

Docs are ambiguous at best.

<script>
  import { onMount } from "svelte";
  import { Preview } from "@vime-js/preview";

  let preview;

  export let src;

  onMount(() => {
    /**
     * If you need to call any methods, you have access
     * to the preview instance here.
     **/
  });
</script>

<Preview bind:this={preview} src={src} />

<VideoPlayer src='/video.mp4' />

THis doesn't work

Currently some media is randomly loaded from a bunch of sources/channels which could be removed at some time. This content should be managed by Vime to prevent any future issues.

I'm very new to Svelte but I'm eager to try some things in conjunction with Vime JS.
I'm trying to run the example from here: https://vime-js.com/complete/setup
I just replaced the lines in App.svelte (from the standard svelte template) with the code mentioned in the set-up guide.
I also followed these steps: https://vime-js.com/integrations/svelte

rollup.config.js excerpt:

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import replace from '@rollup/plugin-replace';
import sveltePreprocess from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;

export default {

    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            preprocess: sveltePreprocess(),
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: css => {
                css.write('public/build/bundle.css');
            }
        }),
        replace({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }),
        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration -
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),

        // In dev mode, call `npm run start` once
        // the bundle has been generated
        !production && serve(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('public'),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

Obviously I also replaced the media source with a local mp4 file. When starting the dev server now with "npm run dev" and switching to the url in Chrome the page is stuck in a loop (page is loading) and isn't rendering anything (Elements tab in Chrome Dev Tools is empty, Network tab shows livereload.js?snipver=1 as pending).

@vime-js/standard works fine for me. So it seems there is an error in the communications between @vime-js/complete and my edited rollup.config.js.

Can you please guide me to my mistake? :)

For some reason the Dash player is automatically playing on load. The autoplay parameter is set to false so it shouldn't do it based on the source code. Need to investigate further.

Hey, this project looks awesome. Thanks for building it.
I'm struggling to get it to work with the basic svelte template.

I did npm install @vimejs/complete. Then created a component:

<script>
  import { Player, FileProvider } from '@vime-js/complete';

  let player = new Player({
    src: "my-video.mp4",
    props:{
        providers:[FileProvider]
    }
  })

  const onPlayerMount = () => {
    // Interact with the player and plugins here.
  };
</script>

<Player
  on:mount={onPlayerMount}
  bind:this={player} 
/>

I then got an issue around not support scss. So I then did:

npm install svelte-preprocess node-sass

After that it complied but I'm now getting:

ReferenceError: process is not defineddebug.js:11:2
    app debug.js:11
    <anonymous> bundle.js:6919

Which seems to be this code:

if (
  // eslint-disable-next-line no-undef
  process.env.NODE_ENV === 'development'
  && window.console !== undefined
) {
  log = function vimeLog(...args) { console.log('[Vime]', ...args); };
  warn = function vimeWarn(...args) { console.warn('[Vime warn]', ...args); };
  error = function vimeError(...args) { console.error('[Vime error]', ...args); };
}

What am I doing wrong? Could you provide a basic example in the docs on running it in a Svelte project.

This is such a cool project. Fantastic docs, great use of Svelte's flexibility and multiple builds, and this resonates with me:

The idea behind Vime is we want you to control the player, not the other way around

Got a UX suggestion - right now the volume range click areas are nice and big, but the clickable area of the time ranges for the audio and video players are just a few pixels tall with a lot of dead area around them.

Ref: https://developers.google.com/cast

Using the ClickToPlay plugin and not the native controls causes a small delay between the click on the video and the video pausing or playing.

When clicking the play button, everything is fine.

The UMD versions of the Lite Player package (lite.js + lite.min.js) seem to be the standard versions instead (over 70 kb uncompressed).

You can check the files after installing the package (https://vime-js.com/lite/setup#installation) - they are much bigger than specified (https://vime-js.com/getting-started#features-differences).

Controls are not much visible if the video running is white. See the screenshot for more details:

Maybe a 1px black shadow or outline could be added to the controls?

Just to let you know that we can't post a question with vime-js tag... not allowed.

so i ask here : Very interested by your project. How to install and use it into a vue component ? A little help would be welcomed ?

cheers

Keep track of user settings (optional), watch history (optional) and plugin settings (optional).

1. The lowest quality is never selected (n+1 problem).
2. The quality is not updated when entering fullscreen.

Ref: #33

Probably start with React and Vue.

Resource: https://github.com/pngwn/svelte-adapter

I've been seeing this on YouTube and Vimeo lately where the scrubber has sections carved out with small titles.

Example in this video (hover over scrubber/seek bar): https://www.youtube.com/watch?v=5f-JlzBuUUU

If controls are set to non-native (Vime.js custom controls), when you try to go fullscreen on Safari, you get a black screen instead of video playing.

Repro:

1. Open https://playground.vime-js.com/?path=/story/complete--video-file in Safari
2. Set useNativeControls to checked
3. Try to go full screen

This might be a little tricky because it'll require a UI and handling of a of a few edge cases. Need to dig deeper into integrating this feature with providers.

Loc: https://github.com/vime-js/vime/blob/master/packages/vime-lite/src/Embed.svelte#L75

Ref: https://github.com/ampproject/amphtml/blob/master/src/preconnect.js

Use the Twitch Embed Player to enable streaming videos, collections and channels on twitch.

There is an open PR on the plyr repository, but it's 2 years old and not quite finished.

I am considering using vime-js for an upcoming project, and would also be happy to help implementing stuff like this. A basic introduction in the documentation would be great though. ;)

Ref: https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API

I wasn't seeing any playback progress data in the console from the onData function when testing out the Vimeo usage code here: https://vime-js.com/lite/usage

It turns out that the "timeupdate" event has been removed from the Vimeo API and replaced with "playProgress", so the docs should probably reflect that.

The current implementation of captions is pretty simple. Videojs has a JS implementation of the Web VTT spec. I didn't include it because of the size but as a plugin this could be useful for devs looking for more advanced caption support and features.

It would be great if we could get the height & width of the video from a provider (I know Vimeo returns vid dimensions with the embed, not sure about YouTube) and have a way to automatically set the wrapper to a matching aspect ratio, removing the black bars present in any video aspect ratio/wrapper mismatch...

There's a bug in Safari on iOS. Sometimes when you seek the video forward, the video progress bar stops updating and stays there unless the video is changed to some other time or ends automatically. Let me know if you need some more details on this, I'll see what I can provide from my development environment.

How do I change the src of the video after it's already been setup? I tried src and bind:src in svelte but they both freeze the player.

Unlike other providers, when playing a video through VimeoProvider, the video plays fine after seek but the currentTime value of store does not change.
It can be reproduced in the playground.

I am looking for something like player.play(). The docs for the lite player suggest player.sendCommand() and via Github code search I could identify player.sendCommand(playVideo). But that is not available on the "complete" player package.

Neither does the following work: player.getStandardPlayer().getLitePlayer().sendCommand() - getLitePlayer() does not exist here.

Ref: https://github.com/Dash-Industry-Forum/dash.js?

Currently, the player does not include types and hence the typescript support is missing. Maybe this could be added somewhere on the roadmap later on to support typescript?

Thanks for the player!

The quality that is initially loaded is too low, it should be one higher. For example, currently if the video player width is 410px then a video with 360p quality will be loaded instead of 480p because it is closer. This results in a video that is stretched and of poor quality.

The controls parameter for the Vimeo embed is only available to PRO members. Fortunately there is a hack to work around this and hide the controls for both free and paid users.

Hack reference: https://jsfiddle.net/s4h4o52z/1/

The ability to display a name, title, logo and whatever else before the video starts.