首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >拉威尔: yt-player没有显示

拉威尔: yt-player没有显示
EN

Stack Overflow用户
提问于 2019-10-20 22:25:48
回答 1查看 110关注 0票数 0

我试图使用yt-player API:https://www.npmjs.com/package/yt-player显示一个具有Laravel的https://www.npmjs.com/package/yt-player播放器。

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

代码语言:javascript
运行
复制
@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控制台中有一个错误:

Uncaught :无法在模块外使用导入语句

我不明白这个错误,如果这是为什么YouTube播放器甚至没有显示在屏幕上。

EN

回答 1

Stack Overflow用户

发布于 2019-10-20 23:20:10

您不能直接在脚本标记中使用import语句,因为您的浏览器无法访问已安装的npm包。

相反,您需要在resources/js/app.js中加载包(该包将由Laravel编译)。

将类似的内容添加到app.js

代码语言:javascript
运行
复制
window.YTPlayer = require('yt-player')

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

现在,您可以使用脚本标记中的包,如下所示:

代码语言:javascript
运行
复制
    var player = new YTPlayer('#player', {
        controls : true,
        related : false,
        info : false,
    });

    player.load('blL9B_dzhoI')
    player.setVolume(100)
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58477834

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档