Question

我正在尝试使用yt-player API与https://www.npmjs.com/package/yt-player

一起使用Laravel显示YouTube播放器

这是我的Laravel show.blade.php模板。

@extends('layouts.app')
@section('content')
<html>
<head>
<script>
    import * as YTPlayer from 'yt-player';

    this.player = YTPlayer;
    this.player.load('blL9B_dzhoI');
    this.player = new YTPlayer('#player', {
        controls : true,
        related : false,
        info : false,
    });

    this.player.setVolume(100);
</script>
</head>

<body>
<div class="row">
   <div class="col colonne-video"> <div id="player"></div> </div>
   <div class="col colonne-interactive"> some text </div>
</div>
</body>
</html>
@endsection

我在Laravel终端中没有任何错误，但在Chrome控制台中没有错误：

未捕获的SyntaxError：无法在模块外部使用import语句

我不理解此错误，这是否是YouTube播放器甚至无法在屏幕上显示的原因。

Answer 1

您不能直接在script标签内使用import语句，因为您的浏览器无法访问已安装的npm软件包。

相反，您需要将包加载到resources/js/app.js（由Laravel Mix编译）中。

向app.js添加类似内容：

window.YTPlayer = require('yt-player')

然后，编译javascript（yarn dev），并将已编译的js文件添加到页面（{{ mix('js/app.js') }}）。

现在，您可以像下面这样在脚本标签中使用包：

    var player = new YTPlayer('#player', {
        controls : true,
        related : false,
        info : false,
    });

    player.load('blL9B_dzhoI')
    player.setVolume(100)

Laravel：yt-player没有显示

1 个答案: