Выберите локальное видео и воспроизведите его в видеоплеере HTML5 (все локально, в одной папке)

для школы мне нужно использовать видеоплеер HTML5 с дополнительными элементами управления и возможностью выбрать файл с локального диска. Страница также работает локально. Так и не загружается. Файлы (HTML и видео) находятся в одной локальной папке.

Для выбора я использую форму с <form><input type="file" id="chosen" /><button type="submit" onclick="open();">Change</button></form>. Теперь вот мой JavaScript, который должен манипулировать исходным кодом видеоплеера:

function open()
{
    var file=document.getElementById('chosen');
    var fileURL = window.URL.createObjectURL(file);
    player.src=fileURL;
    player.load();
}

Видеоплеер выглядит так:

<video id=player>
<source src="big-buck-bunny_trailer.webm" type="video/webm" />
<source src="trailer_480p.mov" type"video/mp4" />
</video>

и, конечно же, я связал переменную player с моим видеоплеером. Функция player.load() работает правильно, поэтому функция вызывается корректно.

Теперь мой вопрос: что не так или чего не хватает в части Javascript? Проект не работает, как описано.

Возможно ты можешь помочь мне. Спасибо ;)


javascript html video filechooser
person Schneeschipp    schedule 20.04.2012    source источник
comment
Вы проверяете в FF или другом браузере?   -  person Salman A    schedule 20.04.2012
comment
Извините, я торопился. Итак, вопрос в том, как JavaScript может манипулировать исходным тегом видео. Видео и HTML-файл находятся в одной папке локально. Я проверяю IE9 и FF   -  person Schneeschipp    schedule 20.04.2012

Ответы (2)


arrow_upward
4
arrow_downward

Я не уверен, о чем вы спрашиваете, но в вашем сценарии есть некоторые проблемы.

function openPlayer(){ // open() is a native function, don't override
  var vplayer=document.getElementById('player'); // A reference to the video-element
  var file=document.getElementById('chosen').files[0]; // 1st member in files-collection
  var fileURL = window.URL.createObjectURL(file);
  vplayer.src=fileURL;
  vplayer.load();
  return; // A good manner to end up a function
}

И не забудьте изменить имя функции в onclick().

Дополнительная информация о <video>: https://developer.mozilla.org/en/HTML/Element/video

Специально для сценариев: https://developer.mozilla.org/en/DOM/HTMLMediaElement

person Teemu    schedule 20.04.2012

arrow_upward
0
arrow_downward

Я не уверен, что отсутствие кодека вызывает здесь проблему, ваш URL-адрес источника видео должен выглядеть примерно так:

<source src="big-buck-bunny_trailer.webm" type='video/webm; codecs="vp8, vorbis"' />
person defau1t    schedule 20.04.2012