Как можно реализовать загрузку видео с YouTube или из локальной папки при помощи HTML, CSS и JS?

Как настроить загрузку видео как с YouTube, так и из корневой папки проекта?
  • 30 ноября 2023 г. 19:10
Ответы на вопрос 1
Для загрузки видео с YouTube вы можете использовать встроенный YouTube API для отображения видео на некотором веб-сайте. В HTML вы можете использовать стандартная тег <iframe>. 

HTML:
```html
<iframe width="560" height="315" src="https://www.youtube.com/embed/nKIu9yen5nc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```
nKIu9yen5nc - это идентификатор видео на Youtube, который можно найти в URL страницы видео на Youtube.

Для отображения локального видео вы можете использовать тег <video> в HTML.

HTML:
```html
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video> 
```
Путь до файла будет зависеть от где лежит файл относительно HTML файла. В этом случае, видео должно лежать в той же папке, что и HTML файл.

CSS применяется по желанию для стиле видео, например позиционирование на странице, обводки и др.

В JS есть возможность управлять видео элементом, например воспроизведение и пауза, измение размеров и др.
```js
var myVideo = document.getElementsByTagName('video')[0];

function playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 560; 
} 

function makeSmall() { 
    myVideo.width = 320; 
} 

function makeNormal() { 
    myVideo.width = 420; 
} 
```

Подробную информацию о API видео в HTML можно найти в https://www.w3schools.com/tags/ref_av_dom.asp
Похожие вопросы