HTML5 видео тег - на сенсорном Сенча, Android не показывает MP4 видео - PullRequest
Новая
       0

HTML5 видео тег - на сенсорном Сенча, Android не показывает MP4 видео

0 голосов
/ 31 августа 2011

У меня проблема с моим кодом.Я пытаюсь отобразить загрузку информации из канала, содержащего видео mp4, и показать его с помощью тега html5 video.Я пытался сохранить простоту кодирования, но все усложнилось, и я не знаю, как заставить работать видео.

В данный момент приложение отображает изображение постера, элементы управления, а также заголовок и описание видео под ним, но когда я нажимаю на видео, строка положения видеоконтроллера переходит от начала к концу, не показывая видео.

Я бы хотел получить любую помощь от людей, которые готовы помочь мне. 

displayVideo = function(nums)
{
var currentVideo = videosstore.getAt(nums).raw.getElementsByTagName('content')[0].getAttribute('url');
var vidType =  videosstore.getAt(nums).raw.getElementsByTagName('content')[0].getAttribute('type');
var currentVidPoster = videosstore.getAt(nums).raw.getElementsByTagName('thumbnail')[0].getAttribute('url');
var vidHtml='';
var vtml = '<video id="vDisp'+nums+'" onClick="this.play();" onended="alert(vMPWidth)" width="' + vMPWidth + '" height="' + vMPHeight + '" controls="controls" preload="metadata" poster="' + currentVidPoster + '"> <source src="' + currentVideo + '" type="' + vidType + '; codecs="avc1.42E01E, mp4a.40.2"" /></video>';
vidHtml = vtml;
videoMainPanel.removeAll();
videoMainPanel.add(
{
 html: vidHtml,
 listeners:
  {
   afterrender: function (){
    console.log(document.getElementById('vDisp'+nums).innerHTML);
   }
  }
 }
);
videoMainPanel.add(
{
 style:
 {
  position: 'absolute',
  top: ''+vMPHeight+'px',
 },
 padding: '20px',
 html: '<div style="color:white"><div>' + videosstore.getAt(nums).get('title') + '<br /><br /></div><div>' + videosstore.getAt(nums).get('description') + '</div></div>',
}
);
setTimeout("videoMainPanel.doLayout()", 1);
};

Причина, по которой я использовал функцию setTimeout, заключалась в том, что вся панель не появилась, если вывыбрал видео дважды.

Надеюсь, я сделал это как можно яснее, но, вероятно, допустил некоторые ошибки.если бы кто-то мог помочь мне с этим, я был бы очень признателен.

@@@@@@@

Обновление: еще раз спасибо за все ваши добрые советы.Я просмотрел 2 сайта, которые вы порекомендовали, и хотя это увлекательно, я не уверен, поможет ли это мне до конца.Я пытаюсь внедрить в программу play (), ложное кодирование и вычеркнул тип, учитывая, что этот тип сбивает с толку android.К сожалению, больше советов о помощи helpfuol предполагает, что я могу изменить видео, но, поскольку это из ленты json, я не могу этого сделать.я подумывал об изменении кодека для программы, но мои коллеги-программисты советуют мне против него ... еще раз спасибо.

Ответы [ 3 ]

1 голос
/ 31 августа 2011

Я хотел бы указать вам на http://www.diveintohtml5.org/video.html,, который объясняет подводные камни.Я могу, но второе мнение @ stslavik, это PITA!

1 голос
/ 31 августа 2011

Вместо того, чтобы вдаваться в детали странной обработки и плохой общей поддержки HTML5 <video>, я укажу здесь:

http://www.broken -links.com / 2010/07/08 / верстку html5-видео-работа-на-Android-телефонов /

В основном, это сводится к:

  • Вам нужен прослушиватель событий, чтобы не выбирать видео дважды.
  • Вам необходимо удалить атрибуты type и codec.

Будьте готовы к дальнейшим неприятностям, хотя, если вы попытаетесь перенести это в другое место - <video> - это просто тег PITA.

Редактировать

Просто чтобы убедиться, что мне ясно: 

displayVideo = function(nums) {
  var currentVideo = videosstore.getAt(nums).raw.getElementsByTagName('content')[0].getAttribute('url');
  var vidType =  videosstore.getAt(nums).raw.getElementsByTagName('content')[0].getAttribute('type');
  var currentVidPoster = videosstore.getAt(nums).raw.getElementsByTagName('thumbnail')[0].getAttribute('url');
  var vidHtml='';
  var vtml = '<video id="vDisp'+nums+'" onClick="this.play();" onended="alert(vMPWidth)" width="' + vMPWidth + '" height="' + vMPHeight + '" controls="controls" preload="metadata" poster="' + currentVidPoster + '"> <source src="' + currentVideo + '"  /></video>';
  vidHtml = vtml;
  videoMainPanel.removeAll();
  videoMainPanel.add({
   html: vidHtml,
   listeners: {
     afterrender: function (){
       console.log(document.getElementById('vDisp'+nums).innerHTML);
     }
   }
  });
  videoMainPanel.add({
   style: {
    position: 'absolute',
    top: ''+vMPHeight+'px',
   },
   padding: '20px',
   html: '<div style="color:white"><div>' + videosstore.getAt(nums).get('title') + '<br /><br /></div><div>' + videosstore.getAt(nums).get('description') + '</div></div>',
  }
  );
  setTimeout("videoMainPanel.doLayout()", 1);
};

Поскольку мы имеем дело с webkit, вероятно, лучше сосредоточиться на поддержке mp4 / m4v / h.264. Когда вы кодируете видео, используйте ручной тормоз с настройками iPhone и отметкой «оптимизировано для Интернета».

Помните, HTML5 по-прежнему не рекомендуется для развертывания. Вы используете это на свой страх и риск. Android действительно предлагает Flash, так что вы можете рассмотреть возможность перехода на flash, если возникнет какая-либо ошибка. (Возможно, добавьте метод для поиска ответа от video.play() и, если он не получен, загрузите флэш-видео)

0 голосов
/ 01 сентября 2011

Если вы развертываете это в phonegap, тогда самый безопасный способ - использовать плагин для phonegap, который будет воспроизводить видео на нативном плеере.Существует один вариант для более старой версии PhoneGap.Я просто адаптировал его для работы с последней версией.если вы заинтересованы, пришлите мне в личку.

...