菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
3177
0

如何引入一个新的 JS 文件到 public/JS 下 (已解决)

原创
05/13 14:22
阅读数 2155

我想在项目中增加播放视频,用 百度官方推出的用于开发网页播放器 cyberplayer,已注册帐号。
首先我在resourses/js/目录下,增加 cyberplayer.js
然后:
在 require('./bootstrap'); 后面 添加:
require('./cyberplayer');
编译之后,查看public/js/app.js 中是有:

/***/ "./resources/js/cyberplayer.js":
/*!*************************************!*\
  !*** ./resources/js/cyberplayer.js ***!
  \*************************************/
/*! no static exports found */
.
.
.

然后在相应的页面:play.blade.php中

@section('scripts')
<script type="text/javascript">
    var filepath = "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.mp4";    // 百度mp4示例
    var fileimage = "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.jpg";   // 百度mp4示例预览图
    // var filepath = "{{$live->stream->stream_name}}";
   //  var fileimage = "{{$live->cover_url}}";   // 百度mp4示例预览图
    var player = cyberplayer("playercontainer").setup({
        width: 680, // 宽度,也可以支持百分比(不过父元素宽度要有)
        height: 448, // 高度,也可以支持百分比
        title: "直播中", // 标题
        file: filepath,
        image: fileimage,
        autostart: false, // 是否自动播放
        stretching: "uniform", // 拉伸设置
        repeat: false, // 是否重复播放
        volume: 100, // 音量
        controls: true, // controlbar是否显示
        starttime: 0, // 视频开始播放时间点(单位s),如果不设置,则可以从上次播放时间点续播
        logo: {   // logo设置
            linktarget: "_blank",
            margin: 8,
            hide: false,
            position: "top-right", // 位置
            file: "" // 图片地址
        },
        ak: "**********" // 公有云平台注册即可获得accessKey 
    });
</script>
@stop

但是不能播放。报错是,找不到。
如何正确引入一个新的 js 文件到app.js 中呢?

如果我手动在public/js下,添加 cyberplayer.js,再把js文件单独引入:
<script src="{{ asset('js/cyberplayer.js') }}"></script>
就可以显示视频播放了。

但手动拷贝似乎不对。

原来,只要修改:webpack.min.js文件,为

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/cyberplayer.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css').version();

然后,再更新 Webpack 。
执行命令:npm run watch-poll
resources/js下面的 cyberplay.js 就自动复制到 public/js下了。

本来想在论坛上提问的,现在解决了,分享给后面的同学。

JS

发表评论

0/200
3177 点赞
0 评论
收藏
为你推荐 换一批