Javascript VideoJS批注注释错误

问题描述

我想在VideoJS上使用Github上的注释注释插件。我想在mp4视频中添加自己的评论。但是在某些地方，我有一个错误。我把它提升到某个部分。我正在分享错误图片。我对Github上的内容不完全了解，您能否解释我该怎么做？

https://github.com/contently/videojs-annotation-comments

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>

app.js

// 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,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,body: 'Can you make this logo bigger?'
            },{
                id: 3,body: "Sure,I'll make it fill the screen some more in the next draft."
            }
        ]
    }
];
 })();

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dom-events javascript video.js