Рубрики
Без рубрики

Сделать ваше видео более доступным

Единственный способ построить Интернет для всех – сделать веб-приложения, включая сопутствующие среды (аудио, … Помечено видео, JavaScript, программирование, доступное.

Единственный способ построить Интернет для всех – сделать веб-приложения, включая соответствующие медиа (аудио, изображения, видео), как можно доступен для всей вашей аудитории.

Visual Media является важным средством для транспортировки информации. Изображения проходят на информацию в формате изображения. Видео принимают это на следующий уровень. Краткие видео, в частности, привлекают внимание и эффективно рассказывают истории.

Тем не менее, видео только частично отношение к визуальному ухудшению пользователей. То же самое глухое и трудно услышанные люди, которые могут поглотить только половину содержания, не говоря уже о тех, кто говорит на языке, отличном от содержания.

Решение для доступов изображений – это добавить текст, но как насчет Аудио в видео ? Вы добавляете субтитры и транскрипты, которые также были бы добро пожаловать те, кто есть, скажем, наблюдая за видео рядом с сонным партнером или кто не хочет просыпаться ребенка.

С облачным, вы можете позволить людям с слухом или визуальными проблемами для участия в видео и аудио. Это руководство показывает вам, как.

Приобретение предпосылок

Чтобы выполнить шаги в этом руководстве, вам нужно следующее:

Начиная

Как запуск, загрузите видео, например этот с YouTube. Следуй этим шагам:

  1. Загрузите видео на свой компьютер.
  2. Создайте проект с основным передним концом и задней частью для поддержки загрузки носителя к задней части, например, на сервер Node.js с MULTER.

Примечание : Чтобы избежать хранения копий загруженных видео, загрузите их в County с помощью [Weature Mailiourary Uploard Widget ( https://cludinate.com/documentation/upload_widget ).

Ваша задняя часть содержит эту облачную конфигурацию и маршрут API:

const multer = require('multer')
const express = require('express')
const cors = require('cors')
const cloudinary = require('cloudinary').v2

require('dotenv').config()
const upload = multer({ dest: 'uploads/' })

cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.API_SECRET,
})

const app = express()

app.use(cors())

app.use(express.json())
app.post('/video/upload', upload.single('video'), uploadVideo)

function uploadVideo(req, res) {
  cloudinary.uploader.upload(
    req.file.path,
    {
      public_id: 'videos/video1',
      resource_type: 'video'
    },
    () => {
      res.json({ message: 'Successfully uploaded video' })
    }
  )
}

  1. Установите зависимости и сохраните правильные переменные среды в .env файл.

    Заменить переменные Cloud_name. , API_KEY и API_SECRET. со значениями с помощью приборной панели вашей учетной записи.

  2. На переднем конце отправьте видео в облачность с помощью Файл вход Отказ

Улучшение доступности видео

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

Вручную генерирующие теги и субтитры могут быть утомительными. Гораздо более эффективная альтернатива – генерировать через облачность в этих двух этапах:

  1. Создайте транскрипты на разных языках, чтобы удовлетворить тем, кто слышит, что оспаривают или зарубежны на языке видео.
  2. Создать и отображать теги, которые относятся к видео для нарушения визуально, включая тех, кто определяет актуальность видео с помощью считывателей экрана.

Использование дополнения видео Google AI

В сочетании с Google’s Rece-To-Text API, облачные Google Ai видео транскрипция Add-on Автоматически генерирует транскрипты для видео. В результате при загрузке или обновлении видео с API Countrary вы можете создавать транскрипты в той же папке, что и видео.

Вот шаги:

  1. Активируйте дополнительный для своей учетной записи Отказ Бесплатный план доступен.

  2. Добавить в облачность Загрузить Метод опция Raw_Convert в Загрузить ссылку API . Raw_Convert Асинхронно генерирует файл на основе загруженного файла.

С помощью этого файла Google создает стенограмму с Google_speech Значение для загруженного видео. Вот как:

function uploadVideo(req, res) {
  cloudinary.uploader.upload(
    req.file.path,
    {
      public_id: 'videos/video2',
      resource_type: 'video',
      raw_convert: 'google_speech'
    },
    () => {
      res.json({ message: 'Successfully uploaded video' })
    }
  )
}

Примечание: Видео / Видео2 Значение для public_id Определяет видео с субтитрами. Назначьте любое значение, сколько вы хотите, и записать его для использования позже.

  1. Вернитесь к передней части и загрузите одно и то же видео.

Countrary затем генерирует другой файл в медиатестере вашей учетной записи:

Video2.transcript Файл гласит следующим образом в редакторе кода:

Вышеуказанная структура JSON показывает, что линия «Если у вас есть только 24 часа за день, ваш успех зависит от того, как вы используете 24», отображается от 0,1 до 7,3 секунды в видео.

Вы также можете генерировать следующее:

Другие стандартные форматы субтитров, такие как Subrip (SRT) и ViTec (VTT), которые поддерживаются другими медиаплеерами. Другие транскрипции на разных языках, которые сделают аудио видео доступным для большего количества зрителей. Французский, например, имеет это Raw_Convert. ценность:

...
  raw_convert: 'google_speech:fr:BE'
...

Этот код генерирует .trranscript Файл с французским переводом. FR: BE Обозначает язык и регион, Бельгию Французский в этом случае. Google поддерживает многочисленные языки и диалекты.

Добавление субтитров в видео

Далее добавьте субтитры в видео по запросу с видеопередачами. Для этого добавьте маршрут на задней панели для загрузки видео, которое сгенерировано .trranscript Файл трансформации:

app.get('/video', getVideo)

function getVideo(req, res) {
  try {
    cloudinary.api.resource('videos/video2', {}, (err, result) => {
      const video = cloudinary.video('videos/video2', {
        resource_type: 'video',
        type: 'upload',
        transformation: [
          {
            overlay: {
              resource_type: 'subtitles',
              public_id: 'videos/video2.transcript',
            },
          },
          { flags: 'layer_apply' },
        ],
      })
      res.json({
        ...result,
        videoElem: video.replace(/poster=/, 'controls poster='),
      })
    })
  } catch (err) {
    console.log({ err })
  }
}

Несколько объяснений:

В Преобразование Собственность, вы добавили наложение субтитры Тип ресурса и указал путь к этому файлу стенограммы.

Возвращаемое значение county.video () Метод в этом формате:

Вы заменили Плакат = со строкой контролирует плакат = и добавил контролирует атрибут видео Элемент, как показано здесь:

Кнопка «Получить видео» наверху делает Получить Запрос на задний конец, хватает видео элемент и отображает его на пользовательском интерфейсе.

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

Captizzizze на автоматическом возможностях видео-тегов Google

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

Чтобы вручную добавить теги на видео:

  1. Нажмите кнопку «Управление видео», а затем щелкните вкладку «Метаданные»:
  1. Введите теги:

Такой ручной процесс – это мирское и время. Вместо этого автоматизируйте его с помощью автоматической функции тегов видео Google. Следуйте инструкциям ниже.

  1. Активируйте надстройку Google Video Tagging. Бесплатный план доступен.

Обновите ЗагрузитьВидео Функция на задней части:

function uploadVideo(req, res) {
  cloudinary.uploader.upload(
    req.file.path,
    {
      public_id: 'videos/video3',
      resource_type: 'video',
      raw_convert: 'google_speech',
      categorization: 'google_video_tagging',
      auto_tagging: 0.7,
    },
    () => {
      res.json({ message: 'Successfully uploaded video' })
    }
  )
}

категоризация Свойство устанавливает надстройки, которые автоматически генерируют теги видео.

Уровень доверия, указанный вами для auto_tagging Свойство обозначает степень уверенности, с которой метка относится к ресурсу. auto_tagging принимает только теги с более высоким уровнем доверия, чем указанный вами. Уровень доверия 1 дает определенные ключевые слова, но только несколько. В вышеупомянутом коде уровень 0,7 служит компромиссом между соответствующими тегами и достаточными метками.

Поскольку дополнение генерирует теги асинхронно, они могут принять некоторое время.

Освежайте экран через некоторое время, и вы увидите эти результаты:

В зависимости от контекста видео, сгенерированные теги могут или не могут быть значимыми для конкретного зрителя. Тем не менее, теги всегда описывают изображения в видео, такие как «автомобили» и «среды».

Отображение связанных тегов видео

Теперь получите видео от облачности, обновляя Getvideo Функция на задней части, чтобы прочитать следующим образом:

...
    cloudinary.api.resource('videos/video3', {}, (err, result) => {
...

Вкладка «Сетевые сети вашего браузера» (или в Postman или любой клиент API) выглядит так:

Вы можете отобразить видео теги любым способом желания, например:

Теги могут быть не совсем точными, поэтому не стесняйтесь вручную редактировать их в приборной панели или добавить другие теги. Для этого видео вы можете добавить тег «Мотивационные цитаты», например.

Добавление переводов с добавлением перевода Google

Теги, которые вы только что сгенерировали, доступны только по англоязычным зрителям. С добавлением перевода Google, которое вы можете использовать во время загрузки изображения или в сочетании с видео для автоматической тегирования, вы можете добавлять переводы.

Следуй этим шагам:

  • Активируйте дополнительный и выберите бесплатный план:
  • Обновите ЗагрузитьВидео Функция Чтобы использовать надстройку перевода Google с функцией автоматической метки Google для видео:
function uploadVideo(req, res) {
  cloudinary.uploader.upload(
    req.file.path,
    {
      public_id: 'videos/video4',
      resource_type: 'video',
      raw_convert: 'google_speech',
      categorization: 'google_video_tagging:en:fr',
      auto_tagging: 0.7,
    },
    () => {
      res.json({ message: 'Successfully uploaded video' })
    }
  )
}

Суффикс : en: fr в категоризация Свойство сообщает дополнение к генерированию тегов, сохранять их на английском и французском языках и отображать их в облачном приборной панели:

Посмотрите на детали ресурсов через API дают следующее:

Данные надстройки заполнены Информация Недвижимость со свойствами в этом потоке:

категоризация → Google_video_tagging → данные

Здесь массив сгенерированных тегов содержит Тег объект с RU (Для английского перевода) и FR (для французского перевода) свойства.

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

Суммирование

Это важно, чтобы веб-приложения, которые содержат СМИ, доступны для всех, особенно ваша целевая аудитория.

Теперь вы узнали, как использовать дополнители Countrary, чтобы улучшить доступность видео, добавляя субтитры и автоматически генерацию и отображение связанных тегов – все на нескольких языках, которые вы хотите.

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

Главальные предлагают много других надежных и эффективных дополнений. Проверьте их.

Оригинал: “https://dev.to/unicodeveloper/making-your-video-more-accessible-1he5”

Читайте ещё по теме: