Closed jyseltz closed 4 years ago
Hi @jyseltz thanks for checking out the plugin! The build currently outputs two versions: a browserified script and a CJS module. The main
in package.json is set to the CJS module: https://github.com/contently/videojs-annotation-comments/blob/master/package.json#L5
This has allowed us to use Webpack imports and make it work with the code in the README. What are you using to bundle the application?
Hi @jackpope thanks for the quick response! I'm using Webpack to bundle, and specifically awesome-typescript-loader to compile. Do you think it would have anything to do with using Typescript?
Hi @jyseltz sorry to leave you hanging here. Is this still a concern? If so, I'll spend some more time looking into it.
Hey @jackpope, thanks for your response
I'm still having trouble loading it. I think the problem may be related to jQuery. If I try to load jquery via the Imports Loader as you mentioned in #44 then the plugin can be imported and registered.
However there still seems to be some problem.. there is no Javascript error, but only the player button and the comments (with broken styles) are loading, and nothing happens if I click on them.
Any ideas? Or is there an easier way to load jQuery that I am overlooking?
Thanks so much for your help!
I follow these problem with Vue.js and ES6/Webpack :)
Now, i solved jQuery problem (i had to include in my project :)). After the comment icon started to appear, but i faced another problem (i think its related to web-animations-js). I couldnt solve yet.
when i clicked to comment icon;
Cannot assign to read only property 'target' of object '[object CustomEvent]'
Hi @eyaylagul
Glad to hear you got the plugin running with Webpack. Jquery is indeed a peer dependency right now but is misrepresented as such - will fix in an upcoming version.
As for the error you're receiving, the API currently relies upon the videojs event system. In the new version of videojs, the event system requires a dom element target we can't hijack it as our API event emitter anymore. I opened an issue with videojs if you're curious about the details https://github.com/videojs/video.js/issues/6203
I believe the solution will be to include a lightweight event emitter within this plugin so that the API is self reliant. I have an upgrade branch going here and may have some time tomorrow to work on the event system: https://github.com/contently/videojs-annotation-comments/pull/49
For the time being, videojs v6 should work fine with the latest release of videojs-annotation-comments
Thanks for this awesome plugin.
@eyaylagul I'm also trying to integrate the plugin in a Vuejs & Webpack environment. Were you able to integrate it successfully?
@Alosies Hi, i'm using like that
package.json
"video.js": "^6.2.0"
"@contently/videojs-annotation-comments": "^1.1.4"
<template>
...
<video
ref="player"
id="video-player"
class="video-js vjs-default-skin vjs-16-9"
data-setup='{"fluid": true}'
controls
>
<source :src="src" type="video/mp4">
</video>
....
</template>
<script>
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
import AnnotationComments from '@contently/videojs-annotation-comments';
import '@contently/videojs-annotation-comments/src/css/annotations.scss';
export default {
...
async mounted() {
// Register annotationPlugin
await videojs.registerPlugin('annotationComments', AnnotationComments(videojs));
// bound video player to dom element
this.player = await videojs(this.$refs.player, {});
// add annotationPlugin with options to video element
this.annotationPlugin = this.player.annotationComments(annotationPluginOptions);
}
}
</script>
@eyaylagul
Thanks a lot for the descriptive answer. It saved me a lot of time. And it worked.
For someone looking for a similar solution in future. I had to add jquery
and reference it in the window object for the plugin to use.
So my mounted hook looks more like this.
async mounted() {
// We import JQuery
const $ = require("jquery");
// We declare it globally
window.$ = $;
// Register annotationPlugin
await videojs.registerPlugin(
"annotationComments",
AnnotationComments(videojs)
);
// bound video player to dom element
this.player = await videojs(this.$refs.player, {});
// add annotationPlugin with options to video element
this.annotationPlugin = this.player.annotationComments(
annotationPluginOptions
);
}
I'm going to close this as it went in a few different directions. If anyone is still having an import issue as of v2.0.0, please re-open or create a new issue.
I encountered an issue with the following library versions: vue: 3.2 (script setup, ts) video.js: 8.0.4 videojs-annotation-comments: 2.0.1
The error message that I received is "Uncaught TypeError: videojs.getPlugin is not a function". Async loading seems not to work
I've tried without vue, just html with cdn
<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
and installed locally <script src="./node_modules/@contently/videojs-annotation-comments/build/videojs-annotation-comments.cjs.js"></script>
vesions 1.1.4 and 2.0.1 gives the same result
with this code snippet
<script>
const player = videojs('my-video');
const pluginOptions = {
annotationsObjects: [],
meta: { user_id: null, user_name: null },
bindArrowKeys: true,
showControls: true,
showCommentList: true,
showFullScreen: true,
showMarkerShapeAndTooltips: true,
internalCommenting: true,
startInAnnotationMode: true
};
videojs.registerPlugin('annotationComments', AnnotationComments);
const pluginInstance = player.annotationComments(pluginOptions);
</script>
The error message that I received is "Uncaught TypeError: videojs.getPlugin is not a function".
Trying to initialize the plugin (v1.1.1 with videojs v6.9.0 and @types/videojs v7.2.5) with with ES6+React using this import code:
and this code to register the plugin and initialize the player:
And I am getting this error:
I believe it may be related to this similar issue with generator-videojs-plugin, related to the plugin using browserify, but I'm not sure. Any ideas?