Audio, Video and Embedded Contentدەنگ، ڤیدیۆ و ناوەڕۆکی چەسپێنراو

For years, a video on a web page needed a plugin — an extra program inside the browser, such as Adobe Flash or Microsoft Silverlight. Plugins had security holes and accessibility problems. HTML5 added the <video> and <audio> elements, which every browser plays by itself. Adobe stopped supporting Flash Player on 31 December 2020 and has blocked Flash content since 12 January 2021, so today all web media is HTML.

بۆ چەندین ساڵ، ڤیدیۆ لە لاپەڕەتۆڕدا (Web page) پێویستی بە پاشکۆ (Plugin) هەبوو — بەرنامەیەکی (Program) زیادە لەناو تۆڕگەڕدا، وەک Adobe Flash یان Microsoft Silverlight. پاشکۆکان کەلێنی ئاسایش (Security) و کێشەی دەستڕاگەیشتنیان (Accessibility) هەبوو. ⁦HTML5⁩ توخمەکانی <video> و <audio>ـی زیاد کرد کە هەموو تۆڕگەڕێک خۆی لێیان دەدات. Adobe لە ⁦31⁩ی کانوونی یەکەمی ⁦2020⁩ پشتگیریی Flash Playerـی ڕاگرت و لە ⁦12⁩ی کانوونی دووەمی ⁦2021⁩ـەوە ڕێگە لە ناوەڕۆکی Flash دەگرێت، بۆیە ئەمڕۆ هەموو میدیای وێب HTMLـە.

You can host the file yourself — upload it with your site and show it with <video> — or use a video platform such as YouTube or Vimeo and put its player on your page with <iframe>. Platforms carry the huge bandwidth for you and give you a ready player; your own file gives you full control and no adverts or tracking (Media in PowerPoint works the same way: embed the file or link to an online video).

دەتوانیت فایلەکە لەسەر ڕاژەکاری (Server) خۆت دابنێیت — لەگەڵ تۆڕگەکەتدا (Website) هەڵبارکردنی (Upload) بکەیت و بە <video> پیشانی بدەیت — یان پلاتفۆرمێکی ڤیدیۆ وەک YouTube یان Vimeo بەکاربهێنیت و لێدەری میدیاکەی (Media player) بە <iframe> بخەیتە ناو لاپەڕەکەتەوە. پلاتفۆرمەکان پانایی باندی (Bandwidth) زۆر لە جیاتی تۆ هەڵدەگرن و لێدەری میدیایەکی ئامادەت دەدەنێ؛ فایلی خۆت کۆنترۆڵی تەواوت دەداتێ و نە ڕیکلام و نە چاودێریی تێدایە (میدیا لە PowerPointـدا هەمان شێوە کار دەکات: فایلەکە دابنێ یان بەستەر بۆ ڤیدیۆیەکی ئۆنلاین).

<video> works like <img> for moving pictures. Give it controls, so visitors — also keyboard and screen-reader users — can play, pause, seek, change the volume, turn on captions and go full screen. width and height keep the space, as for pictures, and poster is the picture shown before the video starts. Whatever you write between the tags is fallback content: only a browser that cannot play HTML video shows it, so offer a download link there.

<video> بۆ وێنەی جووڵاو وەک <img> کار دەکات. controlsـی پێ بدە، بۆ ئەوەی سەردانیکەران — بەکارهێنەرانی کیبۆرد (Keyboard) و خوێنەرەوەی شاشەیش (Screen reader) — بتوانن لێی بدەن، بیوەستێنن، بازی پێ بدەن، دەنگ بگۆڕن، ژێرنووسی دەنگ بکەنەوە و پڕ بە شاشە سەیری بکەن. width و height وەک وێنە شوێنەکە دەهێڵنەوە. poster ئەو وێنەیەیە کە پێش دەستپێکردنی ڤیدیۆکە پیشان دەدرێت. هەرچی لە نێوان تاگەکاندا (Tag) بنووسیت ناوەڕۆکی جێگرەوەیە: تەنیا تۆڕگەڕێک پیشانی دەدات کە نەتوانێت ڤیدیۆی HTML لێبدات، بۆیە لەوێ بەستەرێکی (Hyperlink) دابارکردن (Download) دابنێ.

A video file is a container — MP4 or WebM — that holds tracks: a picture track, one or more sound tracks, sometimes captions. Each track is squeezed with a codec: H.264, VP9 or AV1 for the picture, AAC or Opus for the sound (Formats and compression). A browser can play a file only if it understands both the container and its codecs.

فایلێکی ڤیدیۆ فۆرماتی کۆنتەینەرە — ⁦MP4⁩ یان WebM — کە چەند ڕێچکەیەک لەخۆ دەگرێت: ڕێچکەی وێنە، یەک یان چەند ڕێچکەی دەنگ، هەندێک جاریش ژێرنووسی دەنگ. هەر ڕێچکەیەک بە کۆدەکێک دەپەستێنرێت: ⁦H.264⁩، ⁦VP9⁩ یان ⁦AV1⁩ بۆ وێنە و AAC یان Opus بۆ دەنگ (جۆرەکانی فایل و پەستاندنی فایل). تۆڕگەڕێک تەنیا کاتێک دەتوانێت فایلێک لێبدات کە هەم فۆرماتی کۆنتەینەر و هەم کۆدەکەکانی تێبگات.

MDN's advice: a WebM and an MP4 version are enough for almost every browser. H.264 is covered by patents, which is one reason the royalty-free WebM codecs exist.

ئامۆژگاریی MDN: وەشانێکی WebM و وەشانێکی ⁦MP4⁩ بۆ نزیکەی هەموو تۆڕگەڕێک بەسن. ⁦H.264⁩ پاتێنتی لەسەرە، ئەمەش یەکێکە لە هۆکارەکانی بوونی کۆدەکەکانی بێ کرێی WebM.

Inside <video> or <audio>, list one <source> per file. The browser plays the first one it can. Put the smaller, newer format first and the MP4 that plays everywhere last, then the fallback content. The type attribute (a MIME type) lets the browser skip files it cannot play without downloading them; it may also name the codecs.

لەناو <video> یان <audio>ـدا بۆ هەر فایلێک <source>ـێک بنووسە. تۆڕگەڕەکە یەکەم ئەوەیان لێدەدات کە بتوانێت. جۆری فایلە بچووکتر و نوێیەکە یەکەم دابنێ و ئەو ⁦MP4⁩ـەی لە هەموو شوێنێک لێدەدرێت لە کۆتاییدا، پاشان ناوەڕۆکی جێگرەوە. خەسڵەتی type (جۆری MIMEـێک (MIME type)) ڕێگە بە تۆڕگەڕەکە دەدات ئەو فایلانە تێپەڕێنێت کە ناتوانێت لێیان بدات، بەبێ دابارکردنیان؛ دەتوانێت ناوی کۆدەکەکانیش بهێنێت.

<audio controls> works like <video> without a picture, so it has no width, height or poster. Use it for the pronunciation of a word on a language page, a school radio programme or a podcast episode. The official type of MP3 is audio/mpeg. Always give the words as text too — a transcript (later on this page).

<audio controls> وەک <video>ـێکی بێ وێنە کار دەکات، بۆیە width، height و posterـی نییە. بۆ گۆکردنی وشەیەک لە لاپەڕەیەکی فێربوونی زمان، بەرنامەیەکی ڕادیۆی قوتابخانە یان ئەڵقەیەکی پۆدکاست (Podcast) بەکاری بهێنە. جۆری فەرمیی ⁦MP3⁩ audio/mpegـە. هەمیشە وشەکان وەک دەقیش بدە — دەقی ئاخاوتن (لە خوارتری ئەم لاپەڕەیەدا).

Sound that starts by itself startles people, talks over screen readers and uses mobile data. So browsers block autoplay with sound. A video may start by itself only if it is muted (or has no sound), after the visitor has clicked or typed on the site, or where the browser has learned that this visitor often plays media (MDN). On iPhones it also needs playsinline.

دەنگێک کە خۆی دەست پێ دەکات خەڵک دەترسێنێت، بەسەر خوێنەرەوەکانی شاشەدا قسە دەکات و ئینتەرنێتی مۆبایل بەکار دەهێنێت. بۆیە تۆڕگەڕەکان ڕێگە لە لێدانی خۆکاری بە دەنگ دەگرن. ڤیدیۆیەک تەنیا لەم کاتانەدا دەتوانێت خۆی دەست پێ بکات: کە بێدەنگ بێت (یان دەنگی نەبێت)، دوای ئەوەی سەردانیکەر لە تۆڕگەکەدا کلیکی کردبێت یان شتێکی نووسیبێت، یان کە تۆڕگەڕەکە فێر بووبێت ئەم سەردانیکەرە زۆرجار لەوێ میدیا لێدەدات ⁦(MDN)⁩. لە iPhoneـدا playsinlineـیشی پێویستە.

Deaf and hard-of-hearing visitors cannot hear the sound; many people watch with the sound off on a bus or in a library; language learners read along. WCAG 2.2 success criterion 1.2.2 (level A) asks for captions on all recorded video with sound. The kind of a text track says who it is for:

سەردانیکەرانی کەڕ و قورسبیست ناتوانن دەنگەکە ببیستن؛ زۆر کەس لە پاس یان کتێبخانەدا بێدەنگ سەیر دەکەن؛ فێرخوازانی زمانیش لەگەڵیدا دەخوێننەوە. پێوەری سەرکەوتنی (Success criterion) ⁦1.2.2⁩ی WCAG ⁦2.2⁩ (ئاستی A) ژێرنووسی دەنگ بۆ هەموو ڤیدیۆیەکی تۆمارکراوی بە دەنگ داوا دەکات. kindـی ڕێچکەیەکی دەق دەڵێت بۆ کێیە:

Put one <track> per text file inside <video>, after the <source> elements. kind says what it is, src is the WebVTT file, srclang is its language code (en, ckb for Central Kurdish) and label is the name in the player's menu — write it in its own language. default turns one track on from the start.

بۆ هەر فایلێکی دەق <track>ـێک لەناو <video>ـدا دابنێ، دوای توخمەکانی <source>. kind دەڵێت چییە، src فایلی WebVTTـە، srclang کۆدی زمانەکەیەتی (Language code) (en، ckb بۆ کوردیی ناوەندی) و label ناوەکەیەتی لە لیستی لێدەری میدیاکەدا — بە زمانی خۆی بینووسە. default یەک ڕێچکە لە سەرەتاوە دەکاتەوە.

A WebVTT file (.vtt) is plain text saved as UTF-8. It starts with the line WEBVTT, then a blank line, then cues: an optional number or name, a timing line start --> end (hh:mm:ss.ttt; the hours may be left out) and the text. A blank line ends each cue. In captions, <v Aram> marks who is speaking, and sounds go in square brackets.

فایلێکی WebVTT (.vtt) دەقێکی سادەیە کە بە ⁦UTF-8⁩ پاشەکەوت دەکرێت. بە دێڕی WEBVTT دەست پێ دەکات، پاشان دێڕێکی بەتاڵ، پاشان cueـەکان: ژمارە یان ناوێکی ئارەزوومەندانە، دێڕی کات start --> end (hh:mm:ss.ttt؛ کاتژمێر دەکرێت نەنووسرێت) و دەقەکە. دێڕێکی بەتاڵ کۆتایی بە هەر cueـێک دێنێت. لە ژێرنووسی دەنگدا، <v Aram> دەڵێت کێ قسە دەکات و دەنگەکان لەناو کەوانەی چوارگۆشەدا دەنووسرێن.

A transcript is the whole text of a video or a recording — speech and important sounds — on the page itself. It helps deaf-blind visitors who read with a braille display, people on slow connections, search engines and anyone who wants to read or copy. Audio-only content such as a podcast needs a transcript (WCAG 1.2.1, level A).

دەقی ئاخاوتن هەموو دەقی ڤیدیۆیەک یان تۆمارێکە — قسە و دەنگە گرنگەکان — لەسەر خودی لاپەڕەکە. یارمەتیی سەردانیکەرانی کەڕ و نابینا دەدات کە بە ئامێری بریل دەخوێننەوە، ئەوانەی پەیوەندییان هێواشە، بزوێنەرەکانی گەڕان (Search engine) و هەر کەسێک کە بیەوێت بیخوێنێتەوە یان کۆپی بکات. ناوەڕۆکی تەنیا-دەنگ وەک پۆدکاست پێویستی بە دەقی ئاخاوتن هەیە (WCAG ⁦1.2.1⁩، ئاستی A).

If important information is only seen — text on a board, a chart, a hand pointing — blind visitors miss it. Say it in the narration, add an audio description, or describe it in the transcript (WCAG 1.2.3 and 1.2.5).

ئەگەر زانیارییەکی گرنگ تەنیا ببینرێت — نووسین لەسەر تەختە، هێڵکارییەک (Chart)، دەستێک کە ئاماژە دەکات — سەردانیکەرانی نابینا لەدەستی دەدەن. لە قسەکاندا بیڵێ، وەسفی دەنگی (Audio description) زیاد بکە، یان لە دەقی ئاخاوتندا وەسفی بکە (WCAG ⁦1.2.3⁩ و ⁦1.2.5⁩).

<iframe> shows another web page inside a rectangle of your page: a video player, a map, a form. The embedded page keeps its own address and runs its own code. Your page cannot change it, and it can collect data about your visitors — so embed only what you trust. This is how you put a YouTube video on your page, in privacy-enhanced mode (the youtube-nocookie.com address):

<iframe> لاپەڕەتۆڕێکی تر لەناو لاکێشەیەکی لاپەڕەکەتدا پیشان دەدات: لێدەری میدیایەکی ڤیدیۆ، نەخشەیەک، فۆرمێک (Form). لاپەڕە چەسپێنراوەکە ناونیشانی خۆی دەهێڵێتەوە و کۆدی خۆی جێبەجێ دەکات. لاپەڕەکەت ناتوانێت بیگۆڕێت، ئەویش دەتوانێت زانیاری لەبارەی سەردانیکەرانت کۆ بکاتەوە — بۆیە تەنیا ئەوە بچەسپێنە کە متمانەت پێیەتی. ئەمە ڕێگەی دانانی ڤیدیۆیەکی YouTubeـە لە لاپەڕەکەتدا، بە دۆخی پاراستنی تایبەتێتی (ناونیشانی youtube-nocookie.com):

OpenStreetMap, the free world map made by volunteers, gives an iframe for any place: Share → HTML. The embedded map shows the credit © OpenStreetMap contributors itself; keep it visible. Add a link to the full map and write the address as text, for screen readers and for copying.

OpenStreetMap، نەخشەی ئازادی جیهان کە خۆبەخشان دروستیان کردووە، بۆ هەر شوێنێک iframeـێک دەدات: Share → HTML. نەخشە چەسپێنراوەکە خۆی ناوهێنانی © OpenStreetMap contributors پیشان دەدات؛ با دیار بێت. بەستەرێک بۆ نەخشە تەواوەکە زیاد بکە و ناونیشانەکە وەک دەق بنووسە، بۆ خوێنەرەوەکانی شاشە و بۆ کۆپیکردن.

A real example: the "What the browser shows" boxes in these lessons are iframes with srcdoc (the HTML written inside the attribute) and sandbox="allow-same-origin": your HTML is drawn, but no script runs. The other way round, banks and log-in pages refuse to appear in other sites' frames (X-Frame-Options or frame-ancestors) to stop clickjacking, tricks with invisible frames; the frame shows an error instead.

نموونەیەکی ڕاستەقینە: سندووقەکانی «ئەوەی تۆڕگەڕ پیشانی دەدات» لەم وانانەدا iframeـن بە srcdoc (HTMLـەکە لەناو خەسڵەتەکەدا نووسراوە) و sandbox="allow-same-origin": HTMLـەکەت دەکێشرێت، بەڵام هیچ سکریپتێک جێبەجێ نابێت. بە پێچەوانەوە، بانک و لاپەڕەکانی چوونەژوورەوە (Log in) ڕێگە نادەن لە پەنجەرەی تۆڕگەکانی تردا پیشان بدرێن (X-Frame-Options یان frame-ancestors) بۆ ڕێگرتن لە clickjacking، واتە فێڵ بە پەنجەرەی نەبینراو؛ پەنجەرەکە لەبری ئەوە هەڵەیەک پیشان دەدات.

A video is many still pictures shown quickly — 24 to 60 every second (frame rate) — plus sound. In 1878 Eadweard Muybridge showed the idea with a row of photos of a running horse. Ten minutes at 30 pictures a second is 18,000 pictures, so codecs are essential. After compression, the size depends on the Bit rate: how many bits each second of video uses.

ڤیدیۆ چەندین وێنەی ڕاوەستاوە کە بە خێرایی پیشان دەدرێن — ⁦24⁩ تا ⁦60⁩ لە هەر چرکەیەکدا (ڕێژەی چوارچێوە (Frame rate)) — لەگەڵ دەنگ. لە ⁦1878 Eadweard Muybridge⁩ ئەم بیرۆکەیەی بە ڕیزێک فۆتۆی ئەسپێکی ڕاکەر پیشان دا. دە خولەک بە ⁦30⁩ وێنە لە چرکەیەکدا دەکاتە ⁦18,000⁩ وێنە، بۆیە کۆدەکەکان زۆر پێویستن. دوای پەستاندن، قەبارە بەستراوەتەوە بە ڕێژەی بیت (Bit rate): هەر چرکەیەکی ڤیدیۆ چەند بیت بەکار دەهێنێت.

For a lesson, 720p is usually enough. Many students watch on mobile data, so: use preload="none" for long videos, offer a smaller file or the sound alone, and keep the transcript on the page (Keeping media small and working gives the same advice for slides).

بۆ وانەیەک، ⁦720p⁩ زۆرجار بەسە. زۆر قوتابی بە ئینتەرنێتی مۆبایل سەیر دەکەن، بۆیە: بۆ ڤیدیۆی درێژ preload="none" بەکاربهێنە، فایلێکی بچووکتر یان تەنیا دەنگەکە پێشکەش بکە و دەقی ئاخاوتنەکە لەسەر لاپەڕەکە بهێڵەوە (بچووک و کارا هێشتنەوەی میدیا هەمان ئامۆژگاری بۆ سلاید دەدات).