Блог

Главная - Вопросы по программированию - Я хочу импортировать видеофайлы динамически, с помощью реквизитов, передаваемых другим компонентом

Я хочу импортировать видеофайлы динамически, с помощью реквизитов, передаваемых другим компонентом

#reactjs #import

#reactjs #импорт

Вопрос:

Я перечислил некоторые уроки, видео, видео будут воспроизводиться в модальном

 <div className="list_lessons">
    <ul>
         { lesson.lessonFile amp;amp; lesson.lessonFile.length > 0 amp;amp; lesson.lessonFile.map((file, i) => (
           <li key={i}> 
              <p data-toggle="modal" data-target=".bd-example-modal-lg" className="video" onClick={<Modal videolink={file.filepath} />}>
              { file.filename }
              </p>
          </li> ))} 
    </ul>
</div> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Здесь я передал путь к файлу модальному компоненту как ()

это модальная часть =>

 import React, { Fragment, useState } from 'react'
import { createPortal } from 'react-dom'
import Videoplayer from 'react-video-js-player'
import videoSrc from '../FILES/1. Introduction.mp4';

const Modal = ({ vidPoster, videoName }) => {


    const poster = !vidPoster ? 'https://images.unsplash.com/photo-1602526215099-19d4d14797d6?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=amp;ixlib=rb-1.2.1amp;auto=formatamp;fit=cropamp;w=1000amp;q=80' : vidPoster


    return createPortal(
      <Fragment>
        <div
          
          className="modal fade bd-example-modal-lg"
          tabIndex={-1}
          role="dialog"
          aria-labelledby="myLargeModalLabel"
          aria-hidden="true">

          <div style={{width: "100%"}} className="modal-dialog modal-dialog-centered modal-lg">

            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title" id="exampleModalLongTitle">
                  Modal title
                </h5>
                
                <button
                  type="button"
                  className="close"
                  data-dismiss="modal"
                  aria-label="Close"
                  >
                  <span aria-hidden="true">×</span>
                </button>
              </div>

              <div className="modal-body">
                {!videolink amp;amp; (
                  <Fragment>
                    <h5 className="modal-title" style={{display: 'block'}} id="exampleModalLongTitle1">
                      Playing Default Video...
                    </h5>
                  <br/>
                  </Fragment>
                )}
                  <Videoplayer src={videoSrc} poster={poster} width='770' />
              </div>
            </div>

          </div>

        </div>
      </Fragment>,
      document.querySelector("#modal")
    );
}

export default Modal
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Что я на самом деле хочу сделать, это ( import videoSrc from '../FILES/{videoName} что-то вроде этого) импортировать видео по названию видео

Есть ли какой-либо способ импортировать такой способ или любой другой способ, которым я могу это сделать?

Ответ №1:

Вы должны иметь возможность добавлять эти видео в свою public/ папку, а затем ссылаться на них оттуда. Нет импорта — просто строковый реквизит.

 <Videoplayer src={'/FILES/1. Introduction.mp4'} poster={poster} width='770' />

Комментарии:

1.Это не сработало. VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. Object { code: 4, message: "The media could not be loaded, either because the server or network failed or because the format is not supported." } Выдает эту ошибку

2. @NafizAlDin куда ты положил файлы? Это будет то же самое, что и размещение файлов на общедоступном сервере — если это не работает, это потому, что он не в поддерживаемом формате

3. да, я нашел проблему !. с videojs что-то не так. поэтому я переключился на react-player, и он работал просто отлично.. Спасибо, чувак, ты очень помог.