video-player designed for playing online and offline videos in any vue or nuxt base web page

Overview

nuxt-video-player

Intro

This video-player designed for playing online and offline videos in any vue or nuxt base web page. You can play video from youtube, vimeo, offline path, and other online video URL.

Install

npm install --save nuxt-video-player

How to

import VideoPlayer from 'nuxt-video-player'

require('nuxt-video-player/src/assets/css/main.css')

components: {
    VideoPlayer
}
">
<video-player src="your video url or path"/>

Props

All props are optional.

Name Type Default Required Description
id String v-player false With id you can set a unique identifier for each video-player.
src String null true In src, you need to enter your video URL or file path for play video.
allow (youtube) String clipboard-write; encrypted-media; gyroscope; picture-in-picture false With this, you can set which options in youtube video support.
allowFullscreen (youtube) Boolean true false You can set full-screen mode support or not.
containerStyles String v-player false You can set a class for custom styling for player container.
playerStyles String v-player__iframe false I create this player with iframe, you can add a class for adding custom styles.
autoplay Boolean false false You can set video autoplay with this.
loop Boolean false false with this, you can set video play again after the end or not.
muted Boolean false false You can enable disable audio with this.
poster String null false You can set custom video poster with this.
preload String 'auto' false You can set video preload with this.
Issues
  • www.youtube.com not allowing connection

    www.youtube.com not allowing connection

    I'm setting the link source as src="https://youtu.be/pnJAzq6ITMM" and Youtube doesn't allow connection.

    I don't have this problem with Vimeo.

    opened by tasticad 1
  • Bundle size

    Bundle size

    Once installed for SSR, what's the bundlesize? Bundlephobia says 30kb, how come it's smaller than Vue video player as this seems to be just a wrapper around it?

    opened by Tobeyforce 0
  • HLS issue

    HLS issue

    Unable to play HLS streams

    opened by mjollnir14 0
  • Option to configure auto-play mode

    Option to configure auto-play mode

    Would be nice to have an option to set auto-play to true or false. Great work.

    opened by acrolink 4
Owner
Abdullah Al Fahad
Abdullah Al Fahad
Simple vue component that takes an array of videos as a prop and stitches them together/plays seamlessly in a custom video player

vue-playlist Simple vue component that takes an array of videos as a prop and stitches them together/plays seamlessly in a custom video player This is

misha. 26 Oct 8, 2021
A vue hls video player plugin using video.js 7

vue-videojs7 A vue video.js7 plugin, so you can play hls video(m3u8 format) within html5 easily

Walter Hu 69 Jan 5, 2022
Manage your videos, add any metadata to them and play them.

Manage your videos, add any metadata to them and play them.

null 48 Jan 12, 2022
Podrain Podrain is a web-based podcast app with offline capabilities

Podrain Podrain is a web-based podcast app with offline capabilities. It was built to scratch my own itch, and there are a lot of rough edges (I would

Podrain 20 Jan 7, 2022
📼 A simple video header/section component for Vue. Good for video backgrounds and overlaying content on them.

vue-video-section A simple video header/section component for Vue. Good for video backgrounds and overlaying content on them. Links View demo View on

John Datserakis 32 Jan 7, 2022
Record video or snapshots from device cameras or desktop. Upload and download of video or snapshots is supported.

Multicorder Record video from cameras Record video from desktop screens Playback recordings Take snapshots of video Download videos or snapshots Demo

Brian Winkers 6 Nov 11, 2021
Vue.js sound audio player base on Vuetify UI framework. Covers audio-tag API and adds more.

vuetify-audio Vue.js sound audio player base on Vuetify UI framework. Covers audio-tag API and adds more. Features Support most of audio play in this

Wilson Wu 128 Jan 23, 2022
Embed a YouTube player easily and lazy load the video to save resources and reduces initial load size.

Embed a YouTube player easily and lazy load the video to save resources and reduces initial load size.

Seerat Awan 22 Jan 19, 2022
A Vue.js based video player with good look and custom user config

Awesome-Video-Player A Vue.js based video player with good look and custom user config ✅ good-looking & support custom config ✅ Vue 2 & Vue 3 Support

Ziwen Mei 102 Dec 20, 2021
📹 A Vue 2.x video player component based on DPlayer

Vue-DPlayer A Vue 2.x video player component based on DPlayer. Live Demo Install npm install vue-dplayer -S Usage CDN: https://unpkg.com/[email protected]

MoePlayer 589 Jan 13, 2022
A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.

vue-plyr v7.0.0 - Changelog A vue component for the plyr video & audio player. This is useful for when you want a nice video player in your Vue app. I

Gabe Dunn 630 Jan 19, 2022
🍟 A Lightweight Video Player For Vue.js.

vue-core-video-player A Lightweight Video Player For Vue.js. Get Started Npm $ npm install vue-core-video-player --save Yarn $ yarn add vue-core-video

core-player 284 Jan 13, 2022
A hml5 video player vue component

vue-player author - Artur Sena license - MIT Intro This is a html5 video component made in VueJS with to quickly add videos with placeholders and intr

Artur Sena 22 Jan 9, 2022
🎵 基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器(PC) Online Music Player

?? 基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器(PC) Online Music Player

ssh 1.8k Jan 20, 2022
Azuracast PWA Player - can play locally with the player

Azuracast PWA Player - can play locally with the player

Oussama 19 Jan 19, 2022
🔊 A Vue composable for playing sound effects

?? @vueuse/sound ?? Lets your website communicate using 2 human senses instead of 1 ?? Built with Vue Composition API ✅ Supports Vue 2 & 3 using vue-d

VueUse 203 Jan 7, 2022
Vue.js component for lazyloading YouTube videos.

vue-lazy-youtube-video 1.x documentation can be found here. vue-lazy-youtube-video Features Installation Via NPM Via Yarn Directly in browser Initiali

Andrew 72 Dec 24, 2021
Play your own videos in background responsively in different resolutions.

Responsive Video Background Player for Vue 2 & 3 ⚡️ If you are looking to play videos in the background, you have found the best Vue package for it ??

Avido Food 168 Jan 18, 2022
🎬 A desktop app that automatically removes silence from videos.

?? AtomicEdits Disclaimer I've shelved this project (for now) and am currently working on another startup idea. Follow me on Twitter for more updates

Suboptimal Engineer 25 Jan 14, 2022