surmon-china / videojs-player Goto Github PK

View Code? Open in Web Editor NEW

5.1K 77.0 1.1K 1.75 MB

@videojs player component for @vuejs(3) and React.

Home Page: https://github.surmon.me/videojs-player

License: MIT License

Vue 17.01% JavaScript 8.89% TypeScript 73.08% HTML 1.02%

video-player vue vue-video-player player vue-component player-video videojs vue-hls vue-player react-video-player

videojs-player's Introduction

videojs-player

Video.js player component for Vue(3) and React.

BREAKING CHANGE ⚠️

The vue-video-player package has now been renamed to @videojs-player/vue due to the addition of support for React. Also, support for Vue has undergone a Breaking change, with the latest version of the component only supporting Vue3.

The last version of the vue-video-player package will be released in v6.0, which will just re-export everything from @videojs-player/vue, so if you're ready to use the new version of vue-video-player, please import @videojs-player/vue directly.

The latest version of videojs-player supports responsiveness for the vast majority of Video.js configuration options and allows you to fully customize the player's control panel and interaction details, thanks to the fact that the component does enough processing internally for different frameworks.

Legacy Version

If you are looking for a legacy version of the component for Vue2, use the [email protected]

Component Documentation

Examples
Usage in Vue
Usage in React
Component Props
Component Events
Player State

Video.js Documentation

Usage (Vue)

Install

npm install video.js @videojs-player/vue --save

yarn add video.js @videojs-player/vue

Global component

import { createApp } from 'vue'
import VueVideoPlayer from '@videojs-player/vue'
import 'video.js/dist/video-js.css'

const app = createApp()

app.use(VueVideoPlayer)

Local component

<template>
  <video-player
    src="/your-path/video.mp4"
    poster="/your-path/poster.jpg"
    controls
    :loop="true"
    :volume="0.6"
    ...
    @mounted="..."
    @ready="..."
    @play="..."
    @pause="..."
    @ended="..."
    @seeking="..."
    ...
  />
</template>

<script>
  import { defineComponent } from 'vue'
  import { VideoPlayer } from '@videojs-player/vue'
  import 'video.js/dist/video-js.css'

  export default defineComponent({
    components: {
      VideoPlayer
    }
  })
</script>

Custom player controls

<template>
  <video-player :children="[]" ...>
    <template v-slot="{ player, state }">
      <div class="custom-player-controls">
        <button @click="state.playing ? player.pause() : player.play()">
          {{ state.playing ? 'Pause' : 'Play' }}
        </button>
        <button @click="player.muted(!state.muted)">
          {{ state.muted ? 'UnMute' : 'Mute' }}
        </button>
        <!-- more custom controls elements ... -->
      </div>
    </template>
  </video-player>
</template>

Usage (React)

Install

npm install video.js @videojs-player/react --save

yarn add video.js @videojs-player/react

Component

import React from 'react'
import { VideoPlayer } from '@videojs-player/react'
import 'video.js/dist/video-js.css'

export const Component: React.FC = () => {
  return (
    <VideoPlayer
      src="/your-path/video.mp4"
      poster="/your-path/poster.jpg"
      controls
      loop={true}
      volume={0.6}
      // more props...
      onMounted={/*...*/}
      onReady={/*...*/}
      onPlay={/*...*/}
      onPause={/*...*/}
      onEnded={/*...*/}
      onSeeking={/*...*/}
      // more events...
    />
  )
}

Custom player controls

import React from 'react'
import { VideoPlayer } from '@videojs-player/react'

export const Component: React.FC = () => {
  return (
    <VideoPlayer videoJsChildren={[]} /* props... */>
      {({ player, state }) => (
        <div class="custom-player-controls">
          <button onClick={() => state.playing ? player.pause() : player.play()}>
            {{ state.playing ? 'Pause' : 'Play' }}
          </button>
          <button onClick={() => player.muted(!state.muted)}>
            {{ state.muted ? 'UnMute' : 'Mute' }}
          </button>
          {/* more custom controls elements ... */}
        </div>
      )}
    </VideoPlayer>
  )
}

Component Props

All parameters are optional and Video.js determines the default value of each prop.

"responsive" means that if the prop value you pass in the component changes, Video.js will automatically respond to the corresponding update, e.g. a change in volume will cause the player to change the volume.

Prop Name	Video.js API Doc & Description	Type	Responsive
id	options.id	`String`
src	options.src	`String`	✓
sources	options.sources	`Array`	✓
width	options.width	`Number`	✓
height	options.height	`Number`	✓
preload	options.preload	`String`	✓
loop	options.loop	`Boolean`	✓
muted	options.muted	`Boolean`	✓
poster	options.poster	`String`	✓
controls	options.controls	`Boolean`	✓
autoplay	options.autoplay	`Boolean \| String`	✓
playsinline	options.playsinline	`Boolean`	✓
crossorigin	options.crossOrigin	`String`	✓
volume	A number, between 0 and 1, control the volume of the player.	`Number`	✓
playbackRate	Control the playback rate of the player.	`Number`	✓
playbackRates	options.playbackRates	`Array<Number>`	✓
fluid	options.fluid	`Boolean`	✓
fill	options.fill	`Boolean`	✓
language	options.language	`String`	✓
languages	options.languages	`Object`
tracks	options.tracks	`Array`	✓
textTrackSettings	options.textTrackSettings	`Object`	✓
responsive	options.responsive	`Boolean`	✓
breakpoints	options.breakpoints	`Object`	✓
fullscreen	options.fullscreen	`FullscreenOptions`
aspectRatio	options.aspectRatio	`Boolean`	✓
liveui	options.liveui	`Boolean`
liveTracker	options.liveTracker	`Object`
disablePictureInPicture	options.disablePictureInPicture	`Boolean`	✓
notSupportedMessage	options.notSupportedMessage	`String`	✓
normalizeAutoplay	options.normalizeAutoplay	`Boolean`	✓
audioPosterMode	options.audioPosterMode	`Boolean`	✓
audioOnlyMode	options.audioOnlyMode	`Boolean`	✓
noUITitleAttributes	options.noUITitleAttributes	`Boolean`
preferFullWindow	options.preferFullWindow	`Boolean`
suppressNotSupportedError	options.suppressNotSupportedError	`Boolean`
techCanOverridePoster	options.techCanOverridePoster	`Boolean`
techOrder	options.techOrder	`Array`
inactivityTimeout	options.inactivityTimeout	`Number`
userActions	options.userActions	`Object`
restoreEl	options.restoreEl	`Boolean \| Element`
vtt.js	options['vtt.js']	`String`
`children` (Vue) `videoJsChildren` (React)	options.children	`Array \| Object`
html5	options.html5	`Object`
plugins	options.plugins	`Object`
options	A fallback scheme, if you need to use options that don't exist in props, pass them to `options`.	`VideoJsPlayerOptions`

Component Events

Events emitted by Video.js, the argument type is always EventTarget.

Video.js Event	🫥 🫥 🫥 🫥 🫥 🫥	Vue	React
event.loadstart	-	`@loadstart`	`onLoadStart`
event.suspend	-	`@suspend`	`onSuspend`
event.abort	-	`@abort`	`onAbort`
event.error	-	`@error`	`onError`
event.emptied	-	`@emptied`	`onEmptied`
event.stalled	-	`@stalled`	`onStalled`
event.loadedmetadata	-	`@loadedmetadata`	`onLoadedMetadata`
event.loadeddata	-	`@loadeddata`	`onLoadedData`
event.canplay	-	`@canplay`	`onCanPlay`
event.canplaythrough	-	`@canplaythrough`	`onCanPlayThrough`
event.playing	-	`@playing`	`onPlaying`
event.waiting	-	`@waiting`	`onWaiting`
event.seeking	-	`@seeking`	`onSeeking`
event.seeked	-	`@seeked`	`onSeeked`
event.ended	-	`@ended`	`onEnded`
event.durationchange	-	`@durationchange`	`onDurationChange`
event.timeupdate	-	`@timeupdate`	`onTimeUpdate`
event.progress	-	`@progress`	`onProgress`
event.play	-	`@play`	`onPlay`
event.pause	-	`@pause`	`onpause`
event.ratechange	-	`@ratechange`	`onRateChange`
event.resize	-	`@resize`	`onResize`
event.volumechange	-	`@volumechange`	`onVolumeChange`
event.posterchange	-	`@posterchange`	`onPosterChange`
event.languagechange	-	`@languagechange`	`onLanguageChange`
event.fullscreenchange	-	`@fullscreenchange`	`onFullscreenChange`
event.playbackrateschange	-	`@playbackrateschange`	`onPlaybackRatesChange`
event.controlsdisabled	-	`@controlsdisabled`	`onControlsDisabled`
event.controlsenabled	-	`@controlsenabled`	`onControlsEnabled`
event.enterFullWindow	-	`@enterFullWindow`	`onEnterFullWindow`
event.exitFullWindow	-	`@exitFullWindow`	`onExitFullWindow`
event.enterpictureinpicture	-	`@enterpictureinpicture`	`onEnterPictureInPicture`
event.leavepictureinpicture	-	`@leavepictureinpicture`	`onLeavePictureInPicture`
event.sourceset	-	`@sourceset`	`onSourceSet`
event.texttrackchange	-	`@texttrackchange`	`onTextTrackChange`
event.textdata	-	`@textdata`	`onTextData`
event.useractive	-	`@useractive`	`onUserActive`
event.userinactive	-	`@userinactive`	`onUserInactive`
event.usingcustomcontrols	-	`@usingcustomcontrols`	`onUsingCustomControls`
event.usingnativecontrols	-	`@usingnativecontrols`	`onUsingNativeControls`
event.dispose	-	`@dispose`	`onDispose`
event.beforepluginsetup	-	`@beforepluginsetup`	`onBeforePluginSetup`
event.pluginsetup	-	`@pluginsetup`	`onPluginSetup`
event.componentresize	-	`@componentresize`	`onComponentResize`
event.playerresize	-	`@playerresize`	`onPlayerResize`
event.tap	-	`@tap`	`onTap`
event.ready	-	`@ready`	`onReady`

The events emitted by videojs-player component.

Component Event	Description	Vue	React
mounted	Fires when player component mounted. `({ video: HTMLVideoElement, player: VideoJsPlayer, state: VideoPlayerState })`	`@mounted`	`onMounted`
unmounted	Fires when player component unmounted.	`@unmounted`	`onUnmounted`
stateChange	Fires when player state changed (React only). `(state: VideoPlayerState)`	-	`onStateChange`

Player State

The component maintains a fully responsive state object internally with the player so that you can consume the player state out-of-the-box outside the player, you can get this object via the mounted event or stateChange (React Only).

Key	Description	Value type
src	The URL of the currently playing video.	`String`
currentSrc	ditto	`String`
currentSource	The currently playing video source object.	`videojs.Tech.SourceObject`
width	Player's width.	`Number`
height	Player's height.	`Number`
currentWidth	ditto	`Number`
currentHeight	ditto	`Number`
videoWidth	Video element's width.	`Number`
videoHeight	Video element's height.	`Number`
controls	Whether player controls are enabled or not.	`Boolean`
volume	Player's volume.	`Number`
muted	Is the player muted.	`Boolean`
poster	Player poster image URL.	`String`
playing	Is it playing now.	`Boolean`
waiting	Is it waiting now.	`Boolean`
seeking	A seek operation began.	`Boolean`
paused	Playback has been paused.	`Boolean`
ended	Playback has stopped because the end of the media was reached.	`Boolean`
currentTime	-	`Number`
duration	-	`Number`
playbackRate	-	`Number`
playbackRates	-	`Array<Number>`
isFullscreen	-	`Boolean`
isInPictureInPicture	Whether it is picture-in-picture mode.	`Boolean`
isLive	Is the currently playing live video.	`Boolean`
language	Video.js current language.	`String`
userActive	-	`Boolean`
readyState	-	`videojs.ReadyState`
networkState	-	`videojs.NetworkState`
error	A Custom MediaError of Video.js.	`MediaError \| Null`
buffered	An object that contains ranges of time.	`videojs.TimeRange`
bufferedPercent	-	`Number`
played	-	`TimeRanges`
seekable	-	`TimeRanges`
textTracks	-	`videojs.TextTrackList`
audioTracks	-	`videojs.AudioTrackList`
videoTracks	-	`videojs.VidioTrackList`

Video.js extension

import videojs from 'video.js'

// Video.js plugin
const Plugin = videojs.getPlugin('plugin')
class ExamplePlugin extends Plugin {
  // do something...
}

videojs.registerPlugin('examplePlugin', ExamplePlugin)

// more Video.js operation...

Development

pnpm install

pnpm dev
pnpm dev:vue
pnpm dev:react

pnpm build
pnpm build:vue
pnpm build:react

pnpm lint
pnpm test
pnpm rebirth
pnpm release

Changelog

License

Licensed under the MIT License.

videojs-player's People

Contributors

Stargazers

Watchers

Forkers

lingtal-fork tiandiji lslz627 wanghaixu michmich lijinbao no5no6 greenzhang luckyufei exdestroyer zyxwz jzxyouok leispeed xuegangwu2016 uihoh0 limweb fewiki reyboo fairyly magicknight niubangcha athiwatp jenky xinjiangqingmang clickear glorylee madebykind iamsee erdang kikovipera fingul 33033624 vinodpandey1 weijuer heyuying99 unclemeric shaoxiong789 dragont cuizs jack-hoo looknd zerozh ryanfu webin nihaoit ibmsoft lysk bianfeiniao crazycoke lhlcy cornedor chengjinrui djjeng77 joesleung javierpico xiezhengsu hades-li forks charac ilove523 jimmyinterview laowang-wg augmen h5plus acodercat marwein zhcy091220 ljjfuture vladimyr disarticulate loirsun erictop3 jeromehan nanjing2017 smalleast songie wayne1125 mikeevstropov roberttolton dut3062796s fulinmen keyshare360 yunhor jas0ndyq buildjava mjxchange ethanhuang0526 nealhong t-web ufilestorage lee0101 fallowu isusion kongshanchat linyasa venuspp redmaxoo luckelectricity liulimin-rzt johfermq

videojs-player's Issues

vue-video-player/player.vue Unexpected token (1:0)

您好，请问这是什么情况，是我的vue-loader有问题吗？我其他.vue都是正常的的。

ERROR in ./~/vue-video-player/player.vue
Module parse failed: /Users/bohai/eduProject/hxhz/web/statics/node_modules/vue-video-player/player.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)

iOS设备(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)

你好，我使用这个插件，做了一个demo，在pc浏览器（chrome上面DevTool模式）可以正常播放m3u8文件，在移动设备上面无法播放，
下面是调用代码


<template>
  <video-player :options="videoOptions"></video-player>
</template>

<script>
  import Vue from 'vue';
  import VideoPlayer from 'vue-video-player';

  Vue.use(VideoPlayer);

  export default {
    data() {
      return {
        videoOptions: {
          source: {
            type: 'application/x-mpegURL', 
            src: 'http://192.168.1.56/live/livestream.m3u8',
            withCredentials: false
          },
          live: true,
          autoplay: true
        }
      };
    }
  };
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

在pc上面的播放效果，如图

在iOS设备上面会出现下面的错误

用safari调试这个错误，控制台报下面的错误

希望可以帮忙看下，谢谢了！

Option wdith incorrectly spelled

wdith should be width

高度等于100%无效

playerStateChange not called due to case issue.

playerStateChange event is not called because of this issue: vuejs/vue#4044

Is there a workaround for this issue?

videoOptions is not defined , ssr.js

2.5.0升级到3.0.2或3.0.0出现问题

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_7_vue_video_player___default.a.config is not a function

希望升级video js 的版本

目前video js 的版本是5.x，希望升级到 6.x 系列

iOS设备，微信内置浏览器播放自动全屏问题。

你好，这个播放器在微信播放会自动全屏，我在

第三行
 https://github.com/surmon-china/vue-video-player/blob/master/player.vue#L3

变成下面的代码

<video class="video-js vjs-custom-skin" :class="{ 'live': options.live }" webkit-playsinline="true"></video>

就可以解决在微信浏览器里面播放自动全屏的问题

第二种方式，通过选项的方式设置属性，
我在player.vue的185行

第185行
 https://github.com/surmon-china/vue-video-player/blob/master/player.vue#L185

加入下面的代码，也可以解决问题

        var playsinline = options.playsinline !== undefined ? options.playsinline : true;
        this.player.el().firstChild.setAttribute('webkit-playsinline', playsinline);

这两种方式都是给video这个标签加上一个webkit-playsinline属性，能不能在库里面添加一个这个啊？

可以看一下啊，谢谢了~ @surmon-china

希望支持 x5 同层播放

<video class="video-js vjs-custom-skin" :class="{ 'live': options.live }" id="x5video"></video>

playsinline && (this.$el.children[0].setAttribute('playsinline', playsinline), this.$el.children[0].setAttribute('webkit-playsinline', playsinline), this.$el.children[0].setAttribute('x5-Video-Player-Type', "h5"), this.$el.children[0].setAttribute('x5-Video-Player-Fullscreen',playsinline) )

`
增加 x5-Video-Player-Type ， x5-Video-Player-Fullscreen 属性以后虽然实现了安卓下的同层播放但是加载的圈圈一直转没找到原因，可以考虑增加兼容x5的同层播放

播放按钮无法通过参数隐藏

在videoOptions中添加bigPlayButton: false无法生效

youtube 资源国内无法请求的问题

您好，这段代码能不能根据条件来选择添加

youtube
https://github.com/surmon-china/vue-video-player/blob/master/index.js#L9

有了这段代码，我发现请求一个youtube的资源文件iframe_api,

而在国内，你懂的，根本无法访问啊，会造成浏览器一直加载中的状态。

谢谢啦~

Is there anyway to play local file with video.js ?

I know browser can not open local file by default, I am wondering is there a way to play local video file ?

video options start youtube

Hi @surmon-china

I was no able to start in a specific time of the video of youtube, am I doing something wrong?

thanks for the advice before.

   {
        source: {
          type: 'video/youtube',
          src: 'https://www.youtube.com/watch?v=iD_MyDbP_ZE' 
        },
        start: 35,
        end: 65,
        techOrder: ['youtube'],
        autoplay: false,
        controls: false,
        ytControls: true
   }

there is a warning in nuxt

this is my nuxt.config.js:

css: [
    // '~assets/css/main.css',
    'element-ui/lib/theme-default/index.css',
    '~assets/css/base.css',
    'video.js/dist/video-js.css'
  ],
plugins: [
    // { src: '~plugins/TcPlayer', ssr: false }
    '~plugins/nuxt-video-player-plugin.js',
  ]

this is my plugins/nuxt-video-player-plugin.js:

import Vue from 'vue'

if (process.BROWSER_BUILD) {
	const VueVideoPlayer = require('vue-video-player/ssr')
	Vue.use(VueVideoPlayer)
}

vue:

<template>
  <div id="videos">
    <div class="video-player-box" 
         @play="onPlayerPlay($event)"
         @pause="onPlayerPause($event)"
         @ended="onPlayerEnded($event)"
         @loadeddata="onPlayerLoadeddata($event)"
         @waiting="onPlayerWaiting($event)"
         @playing="onPlayerPlaying($event)"
         @timeupdate="onPlayerTimeupdate($event)"
         @canplay="onPlayerCanplay($event)"
         @canplaythrough="onPlayerCanplaythrough($event)"
         @ready="playerReadied"
         @statechanged="playerStateChanged($event)"
         v-video-player:myVideoPlayer="playerOptions">
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      playerOptions: {
        // component options
        start: 0,
        playsinline: false,
        // videojs options
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
        }]
        // poster: "/static/images/author.jpg",
      }
    }
  },
  mounted () {
    console.log('this is current player instance object', this.myVideoPlayer)
  },
  methods: {
    // listen event
    onPlayerPlay (player) {
      // console.log('player play!', player)
    },
    onPlayerPause (player) {
      // console.log('player pause!', player)
    },
    onPlayerEnded (player) {
      // console.log('player ended!', player)
    },
    onPlayerLoadeddata (player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting (player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying (player) {
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate (player) {
      // console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay (player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough (player) {
      // console.log('player Canplaythrough!', player)
    },
    // or listen state event
    playerStateChanged (playerCurrentState) {
      console.log('player current update state', playerCurrentState)
    },
    // player is ready
    playerReadied (player) {
      console.log('example 01: the player is readied', player)
    }
  }
}
</script>

[Vue warn]：

Error in directive video-player inserted hook: "TypeError: Cannot convert undefined or null to object"

found in

---> <D:\sdyh5git\pages\videodynamic\index.vue> at D:\sdyh5git\pages\videodynamic\index.vue
       <Nuxt> at D:\sdyh5git\.nuxt\components\nuxt.vue
         <Default> at D:\sdyh5git\layouts\default.vue
           <Root>

nuxt version：0.10.6
vue-video-player： 3.1.1

No poster when controls option is fasle

When I set controls to false, the poster will be not shown. Is it normal that?

here is my videoOptions method for passing Options to the video-player component:

    export default{
        data() {
            return {
                videos: [],
            }
        },
        components: {
            videoPlayer
        },
        methods: {
            videoOptions(video) {
                return {
                    source: {
                        type: "video/mp4",
                        src: video.mp4
                    },
                    poster: video.poster,
                    height: 330,
                    autoplay: false,
                    controls: false
                }
            }
        }
    }

Do you want to add text trace of video.js ?

直播问题

在chrome上，直播不能用了？

Webpack errors

Hi,

I'm using:

"devDependencies": {
    "babel-polyfill": "^6.7.4",
    "gulp": "^3.9.1",
    "gulp-replace": "^0.5.4",
    "gulp-uglify": "^1.5.3",
    "vue": "^2.1.4",
    "vue-loader": "^10.0.2",
    "vue-router": "^2.1.1",
    "vue-video-player": "^2.3.4",
    "vuex": "^2.0.0",
    "webpack": "^1.13.3"
  }

when I run webpack I get these:

{ [Error: ./~/video.js/dist/alt/video-js-cdn.css
Module parse failed: /Users/oleynikd/Dropbox/Business/YTV/www/front/blades/web_client_server/youtv-web-app/node_modules/video.js/dist/alt/video-js-cdn.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .video-js .vjs-big-play-button:before, .video-js .vjs-control:before, .video-js .vjs-modal-dialog, .vjs-modal-dialog .vjs-modal-dialog-content {
|   position: absolute;
|   top: 0;
 @ ./~/vue-video-player/index.js 9:0-45
 @ ./resources/assets/js/index.js./~/vue-video-player/lang/bg.json
Module parse failed: /Users/oleynikd/Dropbox/Business/YTV/www/front/blades/web_client_server/youtv-web-app/node_modules/vue-video-player/lang/bg.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Възпроизвеждане",
|   "Pause": "Пауза",
|   "Current Time": "Текущо време",
 @ ./~/vue-video-player/languages.js 3:8-33
 @ ./~/buble-loader?{"objectAssign":"Object.assign"}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/index.js./~/vue-video-player/lang/cs.json
Module parse failed: /Users/oleynikd/Dropbox/Business/YTV/www/front/blades/web_client_server/youtv-web-app/node_modules/vue-video-player/lang/cs.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Přehrát",
|   "Pause": "Pauza",
|   "Current Time": "Aktuální čas",
 @ ./~/vue-video-player/languages.js 5:8-33
 @ ./~/buble-loader?{"objectAssign":"Object.assign"}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/index.js./~/vue-video-player/lang/ar.json
Module parse failed: /Users/oleynikd/Dropbox/Business/YTV/www/front/blades/web_client_server/youtv-web-app/node_modules/vue-video-player/lang/ar.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "تشغيل",
|   "Pause": "ايقاف",
|   "Current Time": "الوقت الحالي",
 @ ./~/vue-video-player/languages.js 2:8-33
 @ ./~/buble-loader?{"objectAssign":"Object.assign"}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/index.js./~/vue-video-player/lang/ca.json
Module parse failed: /Users/oleynikd/Dropbox/Business/YTV/www/front/blades/web_client_server/youtv-web-app/node_modules/vue-video-player/lang/ca.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Reproducció",
|   "Pause": "Pausa",
|   "Current Time": "Temps reproduït",
 @ ./~/vue-video-player/languages.js 4:8-33
 @ ./~/buble-loader?{"objectAssign":"Object.assign"}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/index.js./~/vue-video-player/lang/da.json
Module parse failed: /Users/oleynikd/Dropbox/Business/YTV/www/front/blades/web_client_server/youtv-web-app/node_modules/vue-video-player/lang/da.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Afspil",
|   "Pause": "Pause",
|   "Current Time": "Aktuel tid",
 @ ./~/vue-video-player/languages.js 6:8-33
 @ ./~/buble-loader?{"objectAssign":"Object.assign"}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/index.js./~/vue-video-player/lang/de.json
...

and many-many more.

Please help.
Thank you.

videojs-contrib-hls warning

./~/videojs-contrib-hls/dist/videojs-contrib-hls.js Critical dependencies: This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ./~/videojs-contrib-hls/dist/videojs-contrib-hls.js 7:490-497

I think the warning came from this line: https://github.com/surmon-china/vue-video-player/blob/master/player.vue#L60

rtmp报错

SPA应用下从rtmp直播流跳转到别的页面后，再想跳转到其他页面时只有url变了，页面没有变。控制台提示flash.js?e11f:381 Uncaught TypeError: this.el_.vjs_getProperty is not a function
at Flash.buffered (eval at (app.js:3282), :381:27)
at Flash.bufferedPercent (eval at (app.js:1837), :330:46)
at Flash.eval (eval at (app.js:1837), :272:37)
at Flash.bound (eval at (app.js:1667), :32:15)
at bound (eval at (app.js:1667), :32:15)

Player flashes frames and doesn't play type=rtmp/mp4 VOD

Hi, video.js supports rtmp VOD playback, but when I use vue-video-player the player loads the first frame of the stream and flickers back and forth between black and frame, continually. It seems to have pulled down correct duration information.

video.js example that works:

<video id="example" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264" data-setup='{"techOrder": ["html5", "flash"]}'> <source src="rtmp://[serveraddress]/vod/mp4:sample.mp4" type='rtmp/mp4' /> </video>

This is what I've done with vue-video-player:

<app-vue-video-player :options="{ sources: [{src: 'rtmp://[serveraddress]/vod/mp4:sample.mp4', type: 'rtmp/mp4'}] }"></app-vue-video-player>

I've tested type=video/mp4 streams and they playback fine.

Space key not pause the video

Reproduction Link

https://surmon-china.github.io/vue-video-player/

Steps to reproduce

Play the video
Go fullscreen
Press space key
It exits fullscreen

What is Expected?

Video pauses

What is actually happening?

It exits fullscreen

移动端，进入页面的时候，一直在显示loading的状态，是不是1.0版本的vue用不了这个

中文用户请注意：

issue 只接受带重现的 bug 报告，请不要用来提问题！不符合要求的 issue 会被直接关闭。
请尽量用英文描述你的 issue，这样能够让尽可能多的人帮到你。

Got a question?

The issue list of this repo is exclusively for bug reports and feature requests. For simple questions, please use the following resources:
Read the docs: https://vuejs.org/guide/
Look for/ask questions on stack overflow: https://stackoverflow.com/questions/ask?tags=vue.js

Reporting a bug?

Try to search for your issue, it may have already been answered or even fixed in the development branch.
It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Issues with no clear repro steps will not be triaged. If an issue labeled "need repro" receives no further input from the issue author for more than 5 days, it will be closed.
It is recommended that you make a JSFiddle/JSBin/Codepen to demonstrate your issue. You could start with this template that already includes the latest version of Vue.
For potential SSR (Server Side Rendering) issue or bugs that involves build setups, you can create a reproduction repository with steps in the README.
If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.

Have a feature request?

Remove the template from below and provide thoughtful commentary and code samples on what this feature means for your product. What will it allow you to do that you can't do today? How will it make current work-arounds straightforward? What potential bugs and edge cases does it help to avoid? etc. Please keep it product-centric.

BUG REPORT TEMPLATE

Vue.js version and component version

vue 1.0.21 vue-video-player 3.0.8

Reproduction Link

A minimal JSBin, JSFiddle, Codepen, or a GitHub repository that can reproduce the bug.
You could start with this template: https://jsfiddle.net/39epgLj0/

Steps to reproduce

What is Expected?

What is actually happening?

Cannot resolve module 'videojs'

./~/videojs-youtube/dist/Youtube.js
Module not found: Error: Cannot resolve module 'videojs' in /node_modules/videojs-youtube/dist
resolve module videojs in /node_modules/videojs-youtube/dist

进入视频页面，然后再返回上一级会不停的报错。

进入视频页面一切正常观看，但点击返回,返回上一级会不停的报错。
报的都是同一个错误：
Uncaught TypeError: this.el_.vjs_getProperty is not a function

How to override included CSS?

I'd like to change the big play button color. If possible, I'd like to use my SASS variable to set it.

无法编译webpack出错

错误信息
/~/video.js/dist/video-js.css Module parse failed: /Users/ash/Documents/b/node_modules/video.js/dist/video-js.css Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .video-js .vjs-big-play-button:before, .video-js .vjs-control:before, .video-js .vjs-modal-dialog, .vjs-modal-dialog .vjs-modal-dialog-content { | position: absolute; | top: 0; @ ./~/vue-video-player/index.js 9:0-37 @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

config配置无法减小打包体积

webpack版本1.14.0
配置hls等为false仍会引用相关文件，打包体积也没有变小

VideoPlayer.config({
  youtube: false,  // default false（youtube的支持）
  switcher: false, // default true（播放源切换功能）
  hls: false       // default true（直播功能的支持）
})

    if (configs.hls) require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
    if (configs.youtube) require('videojs-youtube')
    if (configs.switcher) require('videojs-resolution-switcher')

即使判断条件的结果为false，但是仍然会require，除非向下面这样直接设为布尔值false才不会require，打包体积也会变小不少

    if (false) require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
    if (false) require('videojs-youtube')
    if (false) require('videojs-resolution-switcher')

目前是直接注释掉了没用的代码，使用中倒也没有什么问题

nuxt v-for

在nuxt后端渲染的 v-for 循环中，只显示第一个 video ，后面出来的都是空的。

<div v-for="item in items">
         <div class="video-player-box" v-video-player:myVideoPlayer="item.playerOptions">
         </div>
</div>

Issues implementing this in a default Laravel Install (using Elixir)

Hi There,

Thanks for the awesome library. Unfortunately, I can't seem to get this module to work using Laravel Elixir (Webpack). I get the following errors. Any idea on where to start looking?

[17:12:32] Starting 'webpack'...
{ [Error: ./~/video.js/dist/alt/video-js-cdn.css
Module parse failed: /Users/Michael/Code/Project/node_modules/video.js/dist/alt/video-js-cdn.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .video-js .vjs-big-play-button:before, .video-js .vjs-control:before, .video-js .vjs-modal-dialog, .vjs-modal-dialog .vjs-modal-dialog-content {
|   position: absolute;
|   top: 0;
 @ ./~/vue-video-player/index.js 11:0-45
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/ar.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/ar.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "تشغيل",
|   "Pause": "ايقاف",
|   "Current Time": "الوقت الحالي",
 @ ./~/vue-video-player/languages.js 2:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/bg.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/bg.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Възпроизвеждане",
|   "Pause": "Пауза",
|   "Current Time": "Текущо време",
 @ ./~/vue-video-player/languages.js 3:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/ca.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/ca.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Reproducció",
|   "Pause": "Pausa",
|   "Current Time": "Temps reproduït",
 @ ./~/vue-video-player/languages.js 4:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/cs.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/cs.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Přehrát",
|   "Pause": "Pauza",
|   "Current Time": "Aktuální čas",
 @ ./~/vue-video-player/languages.js 5:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/da.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/da.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Afspil",
|   "Pause": "Pause",
|   "Current Time": "Aktuel tid",
 @ ./~/vue-video-player/languages.js 6:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/de.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/de.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Wiedergabe",
|   "Pause": "Pause",
|   "Current Time": "Aktueller Zeitpunkt",
 @ ./~/vue-video-player/languages.js 7:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/el.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/el.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Aναπαραγωγή",
|   "Pause": "Παύση",
|   "Current Time": "Τρέχων χρόνος",
 @ ./~/vue-video-player/languages.js 8:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/en.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/en.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Play",
|   "Pause": "Pause",
|   "Current Time": "Current Time",
 @ ./~/vue-video-player/languages.js 9:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/es.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/es.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Reproducción",
|   "Pause": "Pausa",
|   "Current Time": "Tiempo reproducido",
 @ ./~/vue-video-player/languages.js 10:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/fa.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/fa.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "پخش",
|   "Pause": "وقفه",
|   "Current Time": "زمان کنونی",
 @ ./~/vue-video-player/languages.js 11:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/fi.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/fi.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Toisto",
|   "Pause": "Tauko",
|   "Current Time": "Tämänhetkinen aika",
 @ ./~/vue-video-player/languages.js 12:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/fr.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/fr.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Lecture",
|   "Pause": "Pause",
|   "Current Time": "Temps actuel",
 @ ./~/vue-video-player/languages.js 13:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/hr.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/hr.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Pusti",
|   "Pause": "Pauza",
|   "Current Time": "Trenutno vrijeme",
 @ ./~/vue-video-player/languages.js 14:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/hu.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/hu.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Lejátszás",
|   "Pause": "Szünet",
|   "Current Time": "Aktuális időpont",
 @ ./~/vue-video-player/languages.js 15:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/it.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/it.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Play",
|   "Pause": "Pausa",
|   "Current Time": "Orario attuale",
 @ ./~/vue-video-player/languages.js 16:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/ja.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/ja.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "再生",
|   "Pause": "一時停止",
|   "Current Time": "現在の時間",
 @ ./~/vue-video-player/languages.js 17:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/ko.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/ko.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "재생",
|   "Pause": "일시중지",
|   "Current Time": "현재 시간",
 @ ./~/vue-video-player/languages.js 18:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/nb.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/nb.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Spill",
|   "Pause": "Pause",
|   "Current Time": "Aktuell tid",
 @ ./~/vue-video-player/languages.js 19:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/nl.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/nl.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Afspelen",
|   "Pause": "Pauze",
|   "Current Time": "Huidige tijd",
 @ ./~/vue-video-player/languages.js 20:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/nn.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/nn.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Spel",
|   "Pause": "Pause",
|   "Current Time": "Aktuell tid",
 @ ./~/vue-video-player/languages.js 21:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/pl.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/pl.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Odtwarzaj",
|   "Pause": "Pauza",
|   "Current Time": "Aktualny czas",
 @ ./~/vue-video-player/languages.js 22:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/pt-BR.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/pt-BR.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Tocar",
|   "Pause": "Pausar",
|   "Current Time": "Tempo",
 @ ./~/vue-video-player/languages.js 23:11-39
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/ru.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/ru.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Воспроизвести",
|   "Pause": "Приостановить",
|   "Current Time": "Текущее время",
 @ ./~/vue-video-player/languages.js 24:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/sr.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/sr.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Pusti",
|   "Pause": "Pauza",
|   "Current Time": "Trenutno vrijeme",
 @ ./~/vue-video-player/languages.js 25:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/sv.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/sv.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Spela",
|   "Pause": "Pausa",
|   "Current Time": "Aktuell tid",
 @ ./~/vue-video-player/languages.js 26:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/tr.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/tr.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Oynat",
|   "Pause": "Duraklat",
|   "Current Time": "Süre",
 @ ./~/vue-video-player/languages.js 27:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/uk.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/uk.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Відтворити",
|   "Pause": "Призупинити",
|   "Current Time": "Поточний час",
 @ ./~/vue-video-player/languages.js 28:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/vi.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/vi.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "Phát",
|   "Pause": "Tạm dừng",
|   "Current Time": "Thời gian hiện tại",
 @ ./~/vue-video-player/languages.js 29:8-33
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/zh-CN.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/zh-CN.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "播放",
|   "Pause": "暂停",
|   "Current Time": "当前时间",
 @ ./~/vue-video-player/languages.js 30:11-39
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js./~/vue-video-player/lang/zh-TW.json
Module parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/zh-TW.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "Play": "播放",
|   "Pause": "暫停",
|   "Current Time": "目前時間",
 @ ./~/vue-video-player/languages.js 31:11-39
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue
 @ ./~/vue-video-player/player.vue
 @ ./~/vue-video-player/index.js
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js]
  message: './~/video.js/dist/alt/video-js-cdn.css\nModule parse failed: /Users/Michael/Code/Project/node_modules/video.js/dist/alt/video-js-cdn.css Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type.\n| .video-js .vjs-big-play-button:before, .video-js .vjs-control:before, .video-js .vjs-modal-dialog, .vjs-modal-dialog .vjs-modal-dialog-content {\n|   position: absolute;\n|   top: 0;\n @ ./~/vue-video-player/index.js 11:0-45\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/ar.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/ar.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "تشغيل",\r\n|   "Pause": "ايقاف",\r\n|   "Current Time": "الوقت الحالي",\r\n @ ./~/vue-video-player/languages.js 2:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/bg.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/bg.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Възпроизвеждане",\r\n|   "Pause": "Пауза",\r\n|   "Current Time": "Текущо време",\r\n @ ./~/vue-video-player/languages.js 3:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/ca.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/ca.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Reproducció",\r\n|   "Pause": "Pausa",\r\n|   "Current Time": "Temps reproduït",\r\n @ ./~/vue-video-player/languages.js 4:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/cs.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/cs.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Přehrát",\r\n|   "Pause": "Pauza",\r\n|   "Current Time": "Aktuální čas",\r\n @ ./~/vue-video-player/languages.js 5:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/da.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/da.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Afspil",\r\n|   "Pause": "Pause",\r\n|   "Current Time": "Aktuel tid",\r\n @ ./~/vue-video-player/languages.js 6:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/de.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/de.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Wiedergabe",\r\n|   "Pause": "Pause",\r\n|   "Current Time": "Aktueller Zeitpunkt",\r\n @ ./~/vue-video-player/languages.js 7:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/el.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/el.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Aναπαραγωγή",\r\n|   "Pause": "Παύση",\r\n|   "Current Time": "Τρέχων χρόνος",\r\n @ ./~/vue-video-player/languages.js 8:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/en.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/en.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Play",\r\n|   "Pause": "Pause",\r\n|   "Current Time": "Current Time",\r\n @ ./~/vue-video-player/languages.js 9:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/es.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/es.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Reproducción",\r\n|   "Pause": "Pausa",\r\n|   "Current Time": "Tiempo reproducido",\r\n @ ./~/vue-video-player/languages.js 10:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/fa.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/fa.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "پخش",\r\n|   "Pause": "وقفه",\r\n|   "Current Time": "زمان کنونی",\r\n @ ./~/vue-video-player/languages.js 11:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/fi.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/fi.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Toisto",\r\n|   "Pause": "Tauko",\r\n|   "Current Time": "Tämänhetkinen aika",\r\n @ ./~/vue-video-player/languages.js 12:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/fr.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/fr.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Lecture",\r\n|   "Pause": "Pause",\r\n|   "Current Time": "Temps actuel",\r\n @ ./~/vue-video-player/languages.js 13:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/hr.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/hr.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Pusti",\r\n|   "Pause": "Pauza",\r\n|   "Current Time": "Trenutno vrijeme",\r\n @ ./~/vue-video-player/languages.js 14:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/hu.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/hu.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Lejátszás",\r\n|   "Pause": "Szünet",\r\n|   "Current Time": "Aktuális időpont",\r\n @ ./~/vue-video-player/languages.js 15:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/it.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/it.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Play",\r\n|   "Pause": "Pausa",\r\n|   "Current Time": "Orario attuale",\r\n @ ./~/vue-video-player/languages.js 16:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/ja.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/ja.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "再生",\r\n|   "Pause": "一時停止",\r\n|   "Current Time": "現在の時間",\r\n @ ./~/vue-video-player/languages.js 17:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/ko.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/ko.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "재생",\r\n|   "Pause": "일시중지",\r\n|   "Current Time": "현재 시간",\r\n @ ./~/vue-video-player/languages.js 18:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/nb.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/nb.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Spill",\r\n|   "Pause": "Pause",\r\n|   "Current Time": "Aktuell tid",\r\n @ ./~/vue-video-player/languages.js 19:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/nl.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/nl.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Afspelen",\r\n|   "Pause": "Pauze",\r\n|   "Current Time": "Huidige tijd",\r\n @ ./~/vue-video-player/languages.js 20:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/nn.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/nn.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Spel",\r\n|   "Pause": "Pause",\r\n|   "Current Time": "Aktuell tid",\r\n @ ./~/vue-video-player/languages.js 21:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/pl.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/pl.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Odtwarzaj",\r\n|   "Pause": "Pauza",\r\n|   "Current Time": "Aktualny czas",\r\n @ ./~/vue-video-player/languages.js 22:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/pt-BR.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/pt-BR.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Tocar",\r\n|   "Pause": "Pausar",\r\n|   "Current Time": "Tempo",\r\n @ ./~/vue-video-player/languages.js 23:11-39\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/ru.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/ru.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Воспроизвести",\r\n|   "Pause": "Приостановить",\r\n|   "Current Time": "Текущее время",\r\n @ ./~/vue-video-player/languages.js 24:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/sr.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/sr.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Pusti",\r\n|   "Pause": "Pauza",\r\n|   "Current Time": "Trenutno vrijeme",\r\n @ ./~/vue-video-player/languages.js 25:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/sv.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/sv.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Spela",\r\n|   "Pause": "Pausa",\r\n|   "Current Time": "Aktuell tid",\r\n @ ./~/vue-video-player/languages.js 26:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/tr.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/tr.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Oynat",\r\n|   "Pause": "Duraklat",\r\n|   "Current Time": "Süre",\r\n @ ./~/vue-video-player/languages.js 27:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/uk.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/uk.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Відтворити",\r\n|   "Pause": "Призупинити",\r\n|   "Current Time": "Поточний час",\r\n @ ./~/vue-video-player/languages.js 28:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/vi.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/vi.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "Phát",\r\n|   "Pause": "Tạm dừng",\r\n|   "Current Time": "Thời gian hiện tại",\r\n @ ./~/vue-video-player/languages.js 29:8-33\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/zh-CN.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/zh-CN.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "播放",\r\n|   "Pause": "暂停",\r\n|   "Current Time": "当前时间",\r\n @ ./~/vue-video-player/languages.js 30:11-39\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js./~/vue-video-player/lang/zh-TW.json\nModule parse failed: /Users/Michael/Code/Project/node_modules/vue-video-player/lang/zh-TW.json Unexpected token (2:8)\nYou may need an appropriate loader to handle this file type.\n| {\r\n|   "Play": "播放",\r\n|   "Pause": "暫停",\r\n|   "Current Time": "目前時間",\r\n @ ./~/vue-video-player/languages.js 31:11-39\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-video-player/player.vue\n @ ./~/vue-video-player/player.vue\n @ ./~/vue-video-player/index.js\n @ ./resources/assets/js/bootstrap.js\n @ ./resources/assets/js/app.js',
  showStack: false,
  showProperties: true,
  plugin: 'webpack-stream',
  __safety: { toString: [Function: bound ] } }

希望优化一下加载

打包后文件过大, 使用 fis3 进行的打包, 代码如下

	fis.match('::package', {
		packager: fis.plugin('deps-pack', {
			// ...
			'js/video.js': [
				'/node_modules/vue-video-player/**.js',
				'/node_modules/vue-video-player/**.js:deps'
			],
			'css/video.css': [
				'/node_modules/vue-video-player/**.js:deps',
			],
			// ...
		}),
		// ...
	})

打包完成后, video.js 有1.1MB, video.css 有40.5KB, 希望可以优化一下

请问是基于Vue1.X还是基于2.X

appropriate loader to handle this file type json

Hi @surmon-china

I learning Vue, I was trying your component but have problems with require json file,
How can I config to work with your component?

thanks in advance

ERROR in ./~/vue-video-player/lang/zh-TW.json
Module parse failed: /user/quasar-video/node_modules/vue-video-player/lang/zh-TW.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:8)
    at Parser.pp$4.raise (/user/quasar-video/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/user/quasar-video/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.semicolon (/user/quasar-video/node_modules/webpack/node_modules/acorn/dist/acorn.js:581:61)
    at Parser.pp$1.parseExpressionStatement (/user/quasar-video/node_modules/webpack/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp$1.parseStatement (/user/quasar-video/node_modules/webpack/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp$1.parseBlock (/user/quasar-video/node_modules/webpack/node_modules/acorn/dist/acorn.js:981:25)
    at Parser.pp$1.parseStatement (/user/quasar-video/node_modules/webpack/node_modules/acorn/dist/acorn.js:709:33)
    at Parser.pp$1.parseTopLevel (/user/quasar-video/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/user/quasar-video/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/user/quasar-video/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/user/quasar-video/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/user/quasar-video/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/user/quasar-video/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/user/quasar-video/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /user/quasar-video/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/user/quasar-video/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
 @ ./~/vue-video-player/languages.js 31:11-39

无法加载视频播放组件

Failed to mount component: template or render function not defined.
(found in component )

Video.js Vimeo plugin does not work.

Any fixes?

axios

Anyone can help?
It's working with hard coded, but it's not working with axios.

<template>
    <div class="player">
        <video-player :options="playerOptions" @ready="playerReadied($event)">
        </video-player>
    </div>
</template>

<script>
    require('videojs-resolution-switcher')
    require('videojs-resolution-switcher/lib/videojs-resolution-switcher.css')
    export default {
        data() {
            return {
                playerSources: this.fetchVideos(),
                playerOptions: {
                    plugins: {
                        videoJsResolutionSwitcher: {
                            ui: true,
                            default: 3,
                            dynamicLabel: true
                        }
                    },
                    playbackRates: [0.7, 1, 1.3, 1.5, 1.7],
                    poster: null,
                    height: 360
                }
            }
        },

        methods: {
            playerReadied(player) {
                if (player.updateSrc) {
                    player.updateSrc(this.playerSources)
                    player.on('resolutionchange', function(){
                        console.log('switch the source', player.src())
                    })
                }
            },

            fetchVideos() {
                /*this.playerSources = [
                    {
                        "type": "video/mp4",
                        "src": "https://xxxxx.akamaized.net/12/mp4/360p.mp4",
                        "label": "360P",
                        "res": 1
                    },
                    {
                        "type": "video/mp4",
                        "src": "https://xxxxx.akamaized.net/12/mp4/480p.mp4",
                        "label": "480P",
                        "res": 2
                    },
                    {
                        "type": "video/mp4",
                        "src": "https://xxxxx.akamaized.net/12/mp4/720p.mp4",
                        "label": "720P",
                        "res": 3
                    }
                ];*/
                axios.get('/api/episode/1328')
                    .then(response => {
                        this.playerSources = response.data.videos;
                    });
            }
        }
    }
</script>

hls直播页面返回上一级,网络请求怎么销毁

用Vue弄的SPA应用，在hls直播页面返回上一级时查看network，发现该直播页面的http请求一直存在,不断获取，如何销毁呢？

vue 2.0 有这样的问题

Module not found: Error: Can't resolve 'css' in 'E:\xxx'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'css-loader' instead of 'css'.
 @ ./~/vue-video-player/index.js 9:0-45
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/view.vue
 @ ./src/components/view.vue
 @ ./src/main.js
 @ multi main```

Changing Width of Player

All your samples have black bars by the side how can we remove them and just have the video image?

Is there an area i can change the width of the player?

关于切换 source 后 playbackRates 显示问题

切换 source 前将 playbackRates 设为 100x 实际为 100x
切换 source 后 playbackRates 显示为 100x 实际为 1x

有纯音频播放吗？

在移动端播放器会自动全屏，有纯音频播放或其他不，播放的时候不自动全屏的解决方案吗？

真的不打算弄个中文文档吗？

用的人大多数都是国人吧，英文文档看得真累

是否有基于es6开发的计划？

请问作者有考虑过用es6来开发，然后webpack编译成es5发布么？
这样别人可以直接引用es6的源码，就可以利用webpack2的tree shaking来减体积；也可以直接引用dist下的es5代码

Apple mobile phone play MP4 format video without sound,android has sound.

中文用户请注意：

issue 只接受带重现的 bug 报告，请不要用来提问题！不符合要求的 issue 会被直接关闭。
请尽量用英文描述你的 issue，这样能够让尽可能多的人帮到你。

Got a question?

The issue list of this repo is exclusively for bug reports and feature requests. For simple questions, please use the following resources:
Read the docs: https://vuejs.org/guide/
Look for/ask questions on stack overflow: https://stackoverflow.com/questions/ask?tags=vue.js

Reporting a bug?

Try to search for your issue, it may have already been answered or even fixed in the development branch.
It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Issues with no clear repro steps will not be triaged. If an issue labeled "need repro" receives no further input from the issue author for more than 5 days, it will be closed.
It is recommended that you make a JSFiddle/JSBin/Codepen to demonstrate your issue. You could start with this template that already includes the latest version of Vue.
For potential SSR (Server Side Rendering) issue or bugs that involves build setups, you can create a reproduction repository with steps in the README.
If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.

Have a feature request?

Remove the template from below and provide thoughtful commentary and code samples on what this feature means for your product. What will it allow you to do that you can't do today? How will it make current work-arounds straightforward? What potential bugs and edge cases does it help to avoid? etc. Please keep it product-centric.

BUG REPORT TEMPLATE

Vue.js version and component version

Reproduction Link

A minimal JSBin, JSFiddle, Codepen, or a GitHub repository that can reproduce the bug.
You could start with this template: https://jsfiddle.net/39epgLj0/

Steps to reproduce

What is Expected?

What is actually happening?

播放过程中一直有报错

中文用户请注意：

issue 只接受带重现的 bug 报告，请不要用来提问题！不符合要求的 issue 会被直接关闭。
请尽量用英文描述你的 issue，这样能够让尽可能多的人帮到你。

Got a question?

The issue list of this repo is exclusively for bug reports and feature requests. For simple questions, please use the following resources:
Read the docs: https://vuejs.org/guide/
Look for/ask questions on stack overflow: https://stackoverflow.com/questions/ask?tags=vue.js

Reporting a bug?

Try to search for your issue, it may have already been answered or even fixed in the development branch.
It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Issues with no clear repro steps will not be triaged. If an issue labeled "need repro" receives no further input from the issue author for more than 5 days, it will be closed.
It is recommended that you make a JSFiddle/JSBin/Codepen to demonstrate your issue. You could start with this template that already includes the latest version of Vue.
For potential SSR (Server Side Rendering) issue or bugs that involves build setups, you can create a reproduction repository with steps in the README.
If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.

Have a feature request?

Remove the template from below and provide thoughtful commentary and code samples on what this feature means for your product. What will it allow you to do that you can't do today? How will it make current work-arounds straightforward? What potential bugs and edge cases does it help to avoid? etc. Please keep it product-centric.

BUG REPORT TEMPLATE

Vue.js version and component version

vue version: 2.0.3

Reproduction Link

A minimal JSBin, JSFiddle, Codepen, or a GitHub repository that can reproduce the bug.
You could start with this template: https://jsfiddle.net/39epgLj0/

Steps to reproduce

What is Expected?

What is actually happening?

播放过程中一直提示：VIDEOJS: ERROR: TypeError: _vm.onPlayerTimeupdate is not a function

什么时候支持SSR

Shasum failure

When trying to install the module I am getting an error the the expected checksum and the actual Shasum are different and therefore an error is thrown and the module is not installed.

Using node 7.7.3 and npm 4.1.2

video resource is illegitimate

I followed the document and this component is what I have: https://gist.github.com/mehranrasulian/5bb051ccaf9b21067753b76f06a60898

But here is something I don't understand about videoPlayer component.
As you see I have a console.log in videoOptions method and on the browser console, videoOptions will be called 2 times.
first time is before observing data by Vue.js and it makes an error.

Is there something wrong with my code?

Uncaught ReferenceError: eventEmit is not defined

使用nuxt 0.10.5 vue-video-player 3.0
直接复制的nuxt-ssr-example下的代码到我项目里，出现
Uncaught ReferenceError: eventEmit is not defined
at emitPlayerState (eval at (http://127.0.0.1:3000/_nuxt/nuxt.bundle.9df64e8787f5d111d3be.js:1162:1), :72:15)
at Player.eval (eval at (http://127.0.0.1:3000/_nuxt/nuxt.bundle.9df64e8787f5d111d3be.js:1162:1), :85:13)
at Player.eval (eval at (http://127.0.0.1:3000/_nuxt/nuxt.bundle.9df64e8787f5d111d3be.js:6:1), :873:14)
at Array.forEach (native)
at Player.eval (eval at (http://127.0.0.13000/_nuxt/nuxt.bundle.9df64e8787f5d111d3be.js:6:1), :872:20)
at bound (eval at (http://127.0.0.1:3000/_nuxt/nuxt.bundle.9df64e8787f5d111d3be.js:13:1), :32:15)
emitPlayerState @ ssr.js?8c39:72
(anonymous) @ ssr.js?8c39:85
(anonymous) @ component.js?5748:873
(anonymous) @ component.js?5748:872
bound @ fn.js?13cb:32

surmon-china / videojs-player Goto Github PK

videojs-player's Introduction

videojs-player

BREAKING CHANGE ⚠️

Legacy Version

Component Documentation

Video.js Documentation

Usage (Vue)

Install

Global component

Local component

Custom player controls

Usage (React)

Install

Component

Custom player controls

Component Props

Component Events

Player State

Video.js extension

Development

Changelog

License

videojs-player's People

Contributors

Stargazers

Watchers

Forkers

videojs-player's Issues

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

中文用户请注意：

Got a question?

Reporting a bug?

Have a feature request?

BUG REPORT TEMPLATE

Vue.js version and component version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

中文用户请注意：

Got a question?

Reporting a bug?

Have a feature request?

BUG REPORT TEMPLATE

Vue.js version and component version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

中文用户请注意：

Got a question?

Reporting a bug?

Have a feature request?

BUG REPORT TEMPLATE

Vue.js version and component version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

Recommend Projects

Recommend Topics

Recommend Org