Javascript VideoJS注释错误_Javascript_Dom Events_Video.js

Javascript VideoJS注释错误

javascript

Javascript VideoJS注释错误,javascript,dom-events,video.js,Javascript,Dom Events,Video.js,我想将Github上可用的注释注释插件与VideoJS一起使用。我想在我的mp4视频中添加我自己的评论。但在某些地方我犯了一个错误。我把它提到了某个部分。我将错误分享为图片。我不完全理解Github上的内容，您能解释一下我应该做什么吗 index.html <html> <head> <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet

我想将Github上可用的注释注释插件与VideoJS一起使用。我想在我的mp4视频中添加我自己的评论。但在某些地方我犯了一个错误。我把它提到了某个部分。我将错误分享为图片。我不完全理解Github上的内容，您能解释一下我应该做什么吗

index.html

<html>

     <head>
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="../node_modules/video.js/dist/video-js.min.css" 
/>


<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script type="module" src="/app.js"></script>
<script type="module" src="/demo.js"></script>

</head>

  <body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" 
    poster="jordan.jpg"
    data-setup="{}">
    <source src="jordan.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

<br>
<p style="font-weight: bold;">YOUTUBE VIDEO</p>

<!--- <video id="vid1" class="video-js vjs-default-skin" controls autoplay width="640" height="264"
    data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://youtu.be/_EkO2ofPOXg"}], "youtube": { "iv_load_policy": 1 } }'>
</video>-->

<script src="/node_modules/video.js/dist/video.min.js"></script>
<script src="/dist/Youtube.min.js"></script>
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>

<script src="/videojs-annotation-comments.min.js"></script>

// Setup player and plugin
  (function () {
  const player = window.videojs('my-video', {
    controlBar: {
        volumePanel: {
            inline: false
        }
    }
});
player.muted(true);
player.annotationComments({
    annotationsObjects: window.demoAnnotations,
    bindArrowKeys: true,
    meta: {
        user_id: 3,
        user_name: 'Guest'
    }
});
 })();

 // Intercept VAC logs and port them to console UI
(function () {
window.VAC_DEBUG = true;
// eslint-disable-next-line no-console
const consoleLog = console.log;

// eslint-disable-next-line no-console
console.log = function (msg) {
    if (msg === '::VAC::') {
        let output = '';

        for (let i = 0; i <= arguments.length; i++) {
            output = `${output} ${JSON.stringify(arguments[i])}`;
        }

        // Remove extra quotes and any undefined
        output = output.replace(/\"/g, '').trim();
        output = output.replace('undefined', '');
        output = `>> ${output}`;

        const $p = $('<p/>').text(output);
        $console.append($p);
        $console.scrollTop($console[0].scrollHeight);
    }
    consoleLog.apply(console, arguments);
};

(function () {
window.demoAnnotations = [{
        range: {
            start: 12,
            end: 16
        },
        shape: null,
        comments: [{
                id: 1,
                meta: {
                    datetime: '2017-03-28T19:17:32.238Z',
                    user_id: 1,
                    user_name: 'Jack'
                },
                body: 'Can we swap these for the new icons?'
            },
            {
                id: 4,
                meta: {
                    datetime: '2017-03-28T19:17:32.238Z',
                    user_id: 2,
                    user_name: 'Blaise'
                },
                body: 'Yes I will update this afternoon.'
            }
        ]
    },
    {
        range: {
            start: 1,
            stop: 1
        },
        shape: {
            x1: 34,
            y1: 28,
            x2: 65,
            y2: 71
        },
        comments: [{
                id: 2,
                meta: {
                    datetime: '2017-03-28T19:17:32.238Z',
                    user_id: 1,
                    user_name: 'Jack'
                },
                body: 'Can you make this logo bigger?'
            },
            {
                id: 3,
                meta: {
                    datetime: '2017-03-28T19:17:32.238Z',
                    user_id: 2,
                    user_name: 'Blaise'
                },
                body: "Sure, I'll make it fill the screen some more in the next draft."
            }
        ]
    }
];
 })();