Я пытаюсь условно визуализировать разные видео, в зависимости от того, на каком имени видео из списка нажал пользователь.Я использую теги видео HTML5 и условный оператор внутри оператора возврата, чтобы создать отдельный URL для тега видео для каждого загруженного видео, но оно не обновляется после выбора нового видео.Вот мой код:
function Videos ({files, fileSelected}){
if (files) {
var src
return(
<div>
{ src = (fileSelected) ? URL.createObjectURL(fileSelected): URL.createObjectURL(files[0][0])}
{console.log(src)}
<div className="ui one column centered grid">
<div className="one wide column"> {/*needs to be one wide here not just column for center to work*/}
<h3>Videos</h3>
</div>
</div>
<div className="ui grid">
<div className="ten wide column">
<video controls width="566" height="320">
<source src={src} id='video' type="video/mp4" />
Your browser does not support HTML5 video.
</video>
</div>
<div className="six wide column">
{files[1]}
</div>
</div>
</div>
)
} else return(<div> <h2> No Video Uploaded </h2></div>)
}
export default Videos
Каждый раз, когда пользователь щелкает, обновляется реквизит fileSelected
, который создает новый URL для видео.Я пытаюсь изменить переменную src
, чтобы загрузить другое видео.Сам выбор видео происходит в другом месте и работает, и файл для выбранного видео корректно отправляется на этот компонент.Я читал, что вы можете использовать video.load()
для обновления тега видео, но я не уверен, как это реализовать здесь.
- это формат переменной fileSelected
, которая является просто файлом дляЗагруженное видео 