в чем разница между src и source в элементе video

В элементе видео можно записать разные теги и элементы в том числи src или source. Вместе их использовать нельзя.

Если используется только атрибус src то браузер просто должен найти способ воспроизвести файл, который ему подсунули.

Но если возникают проблемы с воспроизведением в разных браузерах (firefox, opera, chrome, ie) то нужно использовать элементы source.

Пример:

Чтобы обеспечить конкретизацию для своих видео форматов браузеру и чтобы он быстрее начинал загружать видео на устройстве пользователя, нужно добавить опциональный атрибут type и указать MIME и используемые кодеки. Например:

<video id="video" poster="poster.jpg" controls width="480" height="360"> 
<source src="video/preroll.mp4" type='video/mp4; codecs="avcl.42E01E, mp4a.40.2"'>
<source src="video/preroll.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video/preroll.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>Sorry, your browser doesn't support the video element</p>
</video>

type - опция, атрибут, подсказывает браузеру сможет тот или нет воспроизвести данный файл

video/ogg - это тип MIME который определяет формат контейнера

theora, vorbis - название видеокодека и аудиокодека, заключаются в двойные кавычки

Дополнительную информацию о данных параметрах вы сможете найти но адресу wiki.whatwg.org/wiki/Video_type_parameters