Русскоязычный портал о 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
Просмотров: 3534 | Теги: QtQuick, QML | Рейтинг: 1.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

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

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

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

Облако тэгов

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

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

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

Посетители

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

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