无法让Cloudinary视频付款者与Require.js一起使用

时间:2018-09-27 15:47:17

标签: requirejs video-streaming magento2 cloudinary

我正在Magento 2网站上工作,该网站使用Require.js加载了所有JavaScript。

我需要一个页面之一,以使用户能够上传图像和视频,以及将视频回放到其中。

通过遵循their instructions

,我已经能够轻松添加cloudinary上传小部件并将其与Require.js配合使用。

但是,在遵循their video player instructions之后,我无法让他们的视频播放器正常工作。

我在浏览器控制台中遇到以下错误...

  

获取   https://5d5338dbc1c44f0f87cf4daaf823446c.production.codepen.plumbing/js/cloudinary-core.js   net :: ERR_ABORTED 404

     

index.html?d = 1538061283375:17未捕获的错误:的脚本错误   “ cloudinary-core”,需要:   //unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js   http://requirejs.org/docs/errors.html#scripterror       在makeError(require.js:165)       在HTMLScriptElement.onScriptError(require.js:1732)

有什么主意我可以解决这个问题吗?

我已在CODEPEN上重现错误 https://codepen.io/holly845/project/editor/DQNQmd#


index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My New Pen!</title>
</head>
<body>
  <a href="#" id="upload_widget_opener">Upload multiple images</a>
  <br />
<div style="max-width: px">
<video id="doc-player"  controls  muted  class="cld-video-player cld-fluid"></video>
</div>

  <script data-main="/js/config" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
  <script>
    require(['config'], function() {
      require(['custom'])
    })
  </script>
</body>
</html>

js / config.js

requirejs.config({
  baseUrl: 'js',
  paths: {
    jquery: [
      'https://code.jquery.com/jquery-1.12.4',
      'lib/jquery.min'
    ]
  }
});

js / custom.js

define([
  'jquery',
  '//widget.cloudinary.com/global/all.js',
  '//unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js',
  '//unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js'
], function($){
    $( "#upload_widget_opener" ).click(function() {
      cloudinary.openUploadWidget(
        { cloud_name: 'demo', upload_preset: 'a5vxnzbp'}, 
        function(error, result) { console.log(error, result) });
    });   

  var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
var demoplayer = cld.videoPlayer('doc-player', {
  fontFace: 'Yatra One',
  playlistWidget: {
    direction: 'vertical',
    total:5
    }}).width(600);


demoplayer.playlistByTag('video_race', { 
  sourceParams: { overlay: "cloudinary_icon", opacity: 80, effect:  "brightness:200", width: 100, gravity: "north_east", x: 20, y: 10 },  autoAdvance: 0, repeat: true, presentUpcoming: 5 })
});

1 个答案:

答案 0 :(得分:0)

似乎您从src =“ js / cloudinary-core.js”调用cloudinary-core而不将其添加到js文件夹中。 但是,如果您已经添加//unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js,则无需添加cloudinary-core.js。

您能否将其删除并告诉我是否有帮助?