Блог

Главная - Вопросы по программированию - jPlayer не является функцией в Laravel 8 с jQuery

jPlayer не является функцией в Laravel 8 с jQuery

#javascript #html #jquery #laravel #jplayer

#javascript #HTML #jquery #laravel #jplayer

Вопрос:

Я пытаюсь использовать jPlayer в своем проекте Laravel 8, изначально в моем макете был установлен jQuery 3, но был понижен до 2.0, учитывая, что в официальных документах упоминается, что jPlayer был протестирован на этом.

Я установил последнюю версию jPlayer (2.9.2) через NPM и включил ее в свой проект app.js , и она компилируется без ошибок.

 window.jPlayer = require('jPlayer');

Проблема возникает при попытке запустить jPlayer на моей странице, которая расширяет макет, я получаю следующую ошибку:

Неперехваченная ошибка типа: $(…).jPlayer не является функцией

Чего мне не хватает?

layouts/player.blade.php

 <html lang="{{ app()->getLocale() }}">
  <head>
    <meta charset="utf-8">
    <title>{{ config('app.name') }} | @yield('title') </title>
    <meta name="description" content="@yield('description')"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="canonical" href="{{ url()->current() }}">
    <link rel="shortcut icon" href="{{ asset('favicon.ico') }}">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  </head>
  <body class="bg-gray-100">
    <div id="app">
      @yield('content')
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" integrity="sha512-0nVWK03Ud0k6o8wDkri8jxX9zQIn00ZHVud3iqBTwd2bGFwJDQShGVb3 vX1adCRxQckKQrIQMFmIA3tfWe Mg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ mix('js/app.js') }}"></script>
    @yield('js-player')
  </body>
</html>

и моя страница, listen.blade.php

 @extends('layouts.player')
@section('title', "Listen live")
@section('description', "Listen live to " . config('app.name') . " using our radio player.")
@section('content')

  <div id="jquery_jplayer_1"></div>
  <div id="jp_container_1">
   <a href="#" class="jp-play">Play</a>
   <a href="#" class="jp-pause">Pause</a>
  </div>

@endsection

@section('js-player')
<script type="text/javascript">
  $(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer();
  });
</script>
@endsection
Метки: