Русскоязычный портал о QML и QtQuick, QmlPortal What the duck

Каталог статей

Главная » Статьи » Статьи по QML
Создание YouTube-плеера для Nokia N9 на QML
 Выглядит это все примерно так:
 



Итак, для начала создадим функцию loadYouTube() на JavaScript, которая будет загружать JSON-объект с YouTube посредством HTTP запроса и парсить его. По умолчанию тег для поиска видео rssModel.tags выставим в Nokia N9 и количество отображаемого контента в 32. Далее - код этой функции:
  1. function loadYouTube(){
  2.  var doc = new XMLHttpRequest();
  3.  doc.onreadystatechange = function() {
  4.  if (doc.readyState == XMLHttpRequest.DONE) {
  5.  var jsresp = JSON.parse(doc.responseText);
  6.  var entries = jsresp.feed.entry;
  7.  var len = entries.length
  8.  rssModel.clear();
  9.  var vi=1;
  10.  for (var i = 0; i < len; i++) {
  11.  var obj = entries[i];
  12.  rssModel.append( {
  13.  number:
  14.  i + 1,
  15.  url:
  16.  (function() {
  17.  try {
  18.  return(obj.id.$t.replace("http://gdata.youtube.com/feeds/api/videos/", ""));
  19.  }
  20.  catch(e) { return("(no title)"); }})(),
  21.  videoRTSP:
  22.  (function() {
  23.  try {
  24.  return(obj.media$group.media$content[1].url);
  25.  }
  26.  catch(e) { return("(no title)"); }})(),
  27.  videoHTTP:
  28.  (function() {
  29.  try {
  30.  return(obj.media$group.media$content[0].url);
  31.  }
  32.  catch(e) { return("(no title)"); }})(),
  33.  tags:
  34.  (function() {
  35.  try {
  36.  return(obj.yt$statistics.viewCount);
  37.  }
  38.  catch(e) { return("(no title)"); }})(),
  39.  photoType:
  40.  (function() {
  41.  try {
  42.  return(obj.category[0].term);
  43.  }
  44.  catch(e) { return("(no title)"); }})(),
  45.  description:
  46.  (function() {
  47.  try {
  48.  return(obj.content.$t);
  49.   }
  50.  catch(e) { return("(no title)"); }})(),
  51.  photoAuthor:
  52.  (function() {
  53.  try {
  54.  return(trimString(obj.author[0].name.$t,35));
  55.  }
  56.  catch(e) { return("(no title)"); }})(),
  57.  photoHeight:
  58.  (function() {
  59.  try {
  60.  return(obj.media$group.media$thumbnail[0].height);
  61.  }
  62.  catch(e) { return("(no title)"); }})(),
  63.  photoWidth:
  64.  (function() {
  65.  try {
  66.  return(obj.media$group.media$thumbnail[0].width);
  67.  }
  68.  catch(e) { return("(no title)"); }})(),
  69.  photoDate:
  70.  (function() {
  71.  try {
  72.  return(obj.published.$t);
  73.  }
  74.  catch(e) { return("(no title)"); }})(),
  75.  imagePath:
  76.  (function() {
  77.  try {
  78.  return(obj.media$group.media$thumbnail[0].url);
  79.  }
  80.  catch(e) { return("(no title)"); }})(),
  81.  title:
  82.  (function() {
  83.  try {
  84.  return(trimString(obj.title.$t,35));
  85.  }
  86.  catch(e) { return("(no title)"); }})()
  87.  });
  88.   }
  89.  console.log("Successfully")
  90.  }
  91.  }
  92.  doc.open("GET", "http://gdata.youtube.com/feeds/api/videos?q="+rssModel.tags+"&orderby=viewCount&alt=json&max-results=32");
  93.  doc.send();
  94. }

 Еще нам понадобится функция на JavaScript, которая будет обрезать строки, если их длина превышает ширину ListView. Эта функция будет использоваться при отображении названий найденных видео.

  1. function trimString(string, limit) {
  2.  if(string.length > limit) {
  3.  string = string.substr(0, (limit - 3)) + "...";
  4.  }
  5.  return string;
  6. }
Все загруженные и распарсенные данные с YouTube добавляем в QML ListModel:
  1. ListModel{id:rssModel; property string tags :"Nokia N9";}

Для отображения данных в том виде, в каком показано выше на скриншотах, мы добавляем созданную модель в model property для элементов Grid View и List View:
  1. Mobile.GridDelegate { id: gridDelegate }
  2. GridView {
  3.  id: photoGridView; model: rssModel; delegate: gridDelegate; cacheBuffer: 100
  4.  cellWidth: (parent.width-2)/4; cellHeight: cellWidth; width: parent.width; height: parent.height - 1;
  5. }
  6. Mobile.ListDelegate { id: listDelegate }
  7. ListView {
  8.  id: photoListView; model: rssModel; delegate: listDelegate;
  9.  width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100;
  10. }

Когда пользователь щелкнет на выбранном элементе, мы вызываем метод Qt.openUrlExternally(), котопый откроет потоковое видео в дефолтном плеере:
  1. MouseArea{
  2.  id:listMouseArea
  3.  anchors.fill: parent
  4.  onClicked: Qt.openUrlExternally(videoRTSP);
  5. }


Добавляем в приложение меню для выбора тэга и количества отображаемых элементов, кнопки для обновления контента и смены способа отображения результатов поиска и всё - плеер готов.
Категория: Статьи по QML | Добавил: CYAN (26.11.2011) | Автор: C_Y_A_N E W
Просмотров: 3459 | Теги: QtQuick, QML | Рейтинг: 1.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела

Все статьи [0]
Обучение QML [8]
Статьи с базовой информацией о языке QML
Статьи по QML [6]
Статьи по QML
QML для профессионалов [4]
Статьи по QML-темам повышенной сложности
Ссылки на видео [5]
Ссылки на видео с демонстрацией возможностей QML
Ссылки на материалы по QML в интернете [2]
Ссылки на полезные материалы по QML в интернете
Обо всём [1]
Статьи на разные темы, не имеющие отношение к QML и QtQuick

Поиск на сайте

Облако тэгов

kinetic scroll анимация интерфейса кинетик скролл создание интерфейса path view qml видео демонстрация qml QML Component QML Grid Demo QML browser plugin просмотр QML форм QML signal QML Transition базовые типы QML QML Text пример QML экспорт qml из GIMP QML Rectangle color picker QML MouseArea qml export QML State экспорт QML из Photoshop QML QtQuick Web-browser Набор виджетов для QML статьи о QML на русском языке MeegoHarmattan N9/N950 game Sprite Animation GLSL fragment shader Qt Quick 2 Анимация Easing Easing curves Сглаживающие кривые C++ QGraphicsView Q_INVOKABLE Интеграция QML и C++ QML Particle System QtQuick.Particles QML Scene Graph javascript глобальные переменные Qt Mobility QtMultimediaKit map QtMobility.location Debian package Harmattan QtCreator D.U.C.K. H.U.N.T. QML пример

Статистика сайта

Статей: 26
Новостей: 6
Файлов: 10
Форум: 19/46
Коментариев: 6

Посетители

Полезные ресурсы

сайт Российского Qt сообщества The FRUCT program Российская сеть MeeGo пользователей и разработчиков