До появления HTML5 онлайн-аудио и видео реализовывались с помощью Flash или сторонних инструментов. Теперь HTML5 также поддерживает эту функцию. В браузере, поддерживающем HTML5, аудио и видео можно воспроизводить без установки каких-либо плагинов. Встроенная поддержка аудио и видео придает HTML5 огромный потенциал развития.
Встраивание аудио в HTML (традиционный метод). Хотя этот метод можно реализовать, он требует, чтобы браузер поддерживал Flash, и им нельзя управлять, поэтому его очень сложно реализовать.
<object height=200 width=200 data=2_1.swf ></object><embed src=2_1.mp4 type=>
Это означает, что у HTML5 есть большая проблема — совместимость. Аудио
Аудиоформаты, поддерживаемые HTML5: видеоФормат видео:
Из вышесказанного видно, что HTML5, по-видимому, поддерживает несколько форматов, поэтому, когда вы обнаружите, что аудио и видео не отображаются при использовании HTML5, проблема должна заключаться в том, что формат не поддерживается. Примечание. MP4 имеет 3 кодировки: mpg4(xdiv), mpg4(xvid), avc(h264) Только h264 является признанной стандартной кодировкой MP4 (меня тоже обманули, в других форматах есть только звук, но нет изображений). Если вы Если вы столкнулись с такой проблемой, просто используйте конвертер видеоформатов для преобразования формата, и все будет в порядке.
Аудио реализовать очень просто: панель инструментов здесь использует панель инструментов браузера по умолчанию.
<audio src=htmls/1.mp3 control=controls loop=loop preload=auto >Ваш браузер не поддерживает элемент видео</audio>
Хотя для видео можно использовать браузер по умолчанию, частная настройка невозможна, поэтому с технической точки зрения вам все равно необходимо научиться создавать свои собственные инструменты для реализации функций (аудио также может относиться к этому методу).
audioVideo.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>Разместить видео на веб-странице</title><style type=text/css></style><script type=text/javascript src= js/ControlBar.js></script></head><body><audio src=htmls/1.mp3 control=controls loop=loop preload=auto >Ваш браузер не поддерживает элемент видео</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4 control=controlsloop=loopposter=3.jpg>Ваш браузер не поддерживает элемент audio <!-- MP4 имеет 3 кодировки: mpg4(xdiv),,mpg4(xvid), avc(h264), Только h264 является признанной стандартной кодировкой MP4 --></video><div id=progress></div><!-- Регулятор громкости --><input id=volume type=range min=0 max=1 шаг = 0.1 onchange=Volume(this)><!-- Информация о скорости и времени прогресса--><span id=rate>1</span>fps <span id=info></span><button onclick=Play(this) id=btn1>Воспроизвести</button><button onclick=Fast()>Перемотать вперед</button><button onclick=Slow()>Замедлить перемотку</button><button onclick=Prev() >Назад</button><button onclick=Next()>Вперед</button><button onclick=Muted(this)>Отключить звук</button></body></html>
Дисплей (html) и реализация функций (js) разделены и импортированы извне.
ControlBar.js
//Используем скрипт для обнаружения поддержки тегов браузера var support = !!document.createElement(audio).canPlayType;if (!support) {alert(ваш браузер не поддерживает воспроизведение этого видео);}//Определяем глобальный объект Video var e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*Вперед: одна минута*/функция Next() {e1.currentTime+=10; //Установим свойство currentTime, перемотаем вперед на 10 секунд}/*Перемотка назад: на одну минуту*/function Prev() {e1.currentTime-=10; //Установим свойство currentTime, вернемся на 10 секунд назад}/ *Воспроизведение/Пауза*/функция Воспроизведение(e) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=pause}else{e1.pause();document.getElementById(btn1).innerHTML=play}}/*Медленно вперед: Когда оно меньше или равно 1, оно каждый раз замедляется только на 0,2, когда оно больше 1, оно каждый раз уменьшается на 1 */function; Slow(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ *Замедление вперед: когда оно меньше или равно 1, оно замедляется только на 0,2 каждый раз, когда оно больше 1, оно каждый раз уменьшается на 1 */function; Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}function fps2fps(fps) ){if(fps<1){возврат fps.toFixed(1);}else{return fps;}}/*Mute*/function Muted(e){if(e1.muted){e1.muted=false;e.innerHRML=X;document.getElementById(volume).value=e1.volume;}else{e1.muted=true;e.innerHRML= x;document.getElementById(volume).value=0;}}/*Регулировка громкости*/function Volume(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* Информация о ходе выполнения: управление индикатором выполнения и отображение времени выполнения*/function Progress( ) {вар p1=document.getElementById(progress);p1.style.width=(e1.currentTime/e1.duration)*720+px;document.getElementById(info).innerHTML=s2time(e1.currentTime)+/+s2time(e1 .duration);}функция s2time(s){var m=parseFloat(s/60).toFixed(0);s=parseFloat(s%60).toFixed(0);return (m<10? 0+m:m)+:+(s<10?0+ SS);}/* После загрузки веб-страницы добавьте функцию обработки прогресса в событие timeupdate видеообъекта*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*Добавьте прогресс в Функция обработки событий window.onload */window.addEventListener(load,Progress);Реализованные функции: воспроизведение, пауза, ускоренная перемотка вперед, замедленная перемотка вперед, вперед, назад, регулировка громкости, индикатор выполнения и отображение времени. Видно, что более сложные функции могут быть реализованы с помощью свойств и методов Audio или Video.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.