{"id":14083,"date":"2025-05-15T00:51:27","date_gmt":"2025-05-14T21:51:27","guid":{"rendered":"https:\/\/www.inetmar.com\/blog\/?p=14083"},"modified":"2025-05-15T09:33:08","modified_gmt":"2025-05-15T06:33:08","slug":"html-video-ekleme-islemi-nasil-yapilir","status":"publish","type":"post","link":"https:\/\/www.inetmar.com\/blog\/html-video-ekleme-islemi-nasil-yapilir\/","title":{"rendered":"HTML Video Ekleme \u0130\u015flemi Nas\u0131l Yap\u0131l\u0131r?"},"content":{"rendered":"

HTML5 ile web sitenize eklenti kullanmadan kolayca video yerle\u015ftirebilirsiniz. Nas\u0131l m\u0131? \u0130\u015fte detaylar\u2026<\/p>\n

HTML5 ile Video Oynatmak Art\u0131k \u00c7ok Kolay<\/h2>\n

Eskiden web sitelerine video eklemek i\u00e7in Flash gibi eklentiler kullanmak gerekiyordu. Ancak bu hem g\u00fcvenlik sorunlar\u0131na yol a\u00e7\u0131yor hem de mobil cihazlarda uyumsuzluk yarat\u0131yordu. Neyse ki HTML5 ile birlikte gelen <video><\/code> etiketi sayesinde art\u0131k taray\u0131c\u0131lar do\u011frudan video oynatabiliyor.<\/p>\n

<video> Etiketi Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n

A\u015fa\u011f\u0131da basit bir HTML video oynatma \u00f6rne\u011fi yer al\u0131yor:<\/p>\n

<video width=\"360\" height=\"240\" controls>\r\n  <source src=\"video.mp4\" type=\"video\/mp4\">\r\n  <source src=\"video.webm\" type=\"video\/webm\">\r\n  Taray\u0131c\u0131n\u0131z video etiketini desteklemiyor.\r\n<\/video>\r\n<\/code><\/pre>\n
controls<\/strong> \u00f6zelli\u011fi sayesinde kullan\u0131c\u0131 videoyu oynatabilir, durdurabilir veya sesi ayarlayabilir.<\/p>\n
\"html<\/p>\n
Video Etiketinde Kullan\u0131labilecek \u00d6zellikler<\/h2>\n
    \n
  • controls<\/strong>: Kontrol d\u00fc\u011fmelerini g\u00f6sterir.<\/li>\n
  • autoplay<\/strong>: Sayfa y\u00fcklendi\u011finde videoyu otomatik oynat\u0131r (genellikle muted ile birlikte).<\/li>\n
  • muted<\/strong>: Videoyu sessiz ba\u015flat\u0131r.<\/li>\n
  • loop<\/strong>: Video bitti\u011finde yeniden ba\u015flat\u0131r.<\/li>\n
  • poster<\/strong>: Video ba\u015flamadan \u00f6nce g\u00f6sterilecek \u00f6nizleme g\u00f6rselidir.<\/li>\n<\/ul>\n
    Taray\u0131c\u0131 Deste\u011fi ve Video Formatlar\u0131<\/h2>\n
    Her taray\u0131c\u0131 her video format\u0131n\u0131 desteklemez. Bu y\u00fczden birden fazla format belirtmek \u00f6nemlidir:<\/p>\n\n\n\n\n\n\n\n
    Format<\/th>\nMIME T\u00fcr\u00fc<\/th>\nDestekleyen Taray\u0131c\u0131lar<\/th>\n<\/tr>\n<\/thead>\n
    MP4<\/td>\nvideo\/mp4<\/td>\nT\u00fcm modern taray\u0131c\u0131lar<\/td>\n<\/tr>\n
    WebM<\/td>\nvideo\/webm<\/td>\nChrome, Firefox, Opera<\/td>\n<\/tr>\n
    Ogg<\/td>\nvideo\/ogg<\/td>\nFirefox, Chrome, Opera<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Poster Kullan\u0131m\u0131 (Video \u00d6nizleme G\u00f6rseli)<\/h2>\n
    Videonuz ba\u015flamadan \u00f6nce bir g\u00f6rsel g\u00f6stermek isterseniz a\u015fa\u011f\u0131daki gibi poster<\/code> \u00f6zelli\u011fini kullanabilirsiniz:<\/p>\n
    <video controls poster=\"onizleme.jpg\" width=\"360\" height=\"240\">\r\n  <source src=\"video.mp4\" type=\"video\/mp4\">\r\n<\/video>\r\n<\/code><\/pre>\n
    JavaScript ile Video Kontrol\u00fc<\/h2>\n
    HTML5 video \u00f6\u011fesini JavaScript ile kontrol etmek de m\u00fcmk\u00fcn. \u00d6rne\u011fin:<\/p>\n
    <video id=\"video1\" width=\"320\" controls>\r\n  <source src=\"video.mp4\" type=\"video\/mp4\">\r\n<\/video>\r\n\r\n<button onclick=\"document.getElementById('video1').play()\">Oynat<\/button>\r\n<button onclick=\"document.getElementById('video1').pause()\">Durdur<\/button>\r\n<\/code><\/pre>\n
    SEO A\u00e7\u0131s\u0131ndan Video Kullan\u0131m\u0131<\/h2>\n
      \n
    • Video dosyas\u0131n\u0131n ad\u0131 a\u00e7\u0131klay\u0131c\u0131 olmal\u0131 (\u00f6rnek: urun-tanitim.mp4<\/code>).<\/li>\n
    • Poster g\u00f6rseline alt etiketi tan\u0131mlanabilir.<\/li>\n
    • Videonun i\u00e7eri\u011fini yaz\u0131yla da a\u00e7\u0131klamak arama motorlar\u0131 i\u00e7in faydal\u0131d\u0131r.<\/li>\n
    • Sayfa h\u0131z\u0131 \u00f6nemli oldu\u011fundan video boyutu optimize edilmelidir.<\/li>\n<\/ul>\n
      K\u0131sacas\u0131 HTML5 ile video eklemek art\u0131k hem kolay hem de modern taray\u0131c\u0131larla tam uyumlu. Sadece birka\u00e7 sat\u0131r kodla sayfan\u0131za canl\u0131l\u0131k katabilirsiniz. G\u00f6rsel i\u00e7erikler kullan\u0131c\u0131 deneyimini art\u0131r\u0131rken, sayfan\u0131z\u0131n da daha ilgi \u00e7ekici hale gelmesini sa\u011flar.<\/p>\n","protected":false},"excerpt":{"rendered":"
      HTML5 ile web sitenize eklenti kullanmadan kolayca video yerle\u015ftirebilirsiniz. Nas\u0131l m\u0131? \u0130\u015fte detaylar\u2026 HTML5 ile Video Oynatmak Art\u0131k \u00c7ok Kolay Eskiden web sitelerine video eklemek i\u00e7in Flash gibi eklentiler kullanmak gerekiyordu. Ancak bu hem g\u00fcvenlik...<\/p>\n","protected":false},"author":2,"featured_media":14087,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-14083","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cms"],"_links":{"self":[{"href":"https:\/\/www.inetmar.com\/blog\/wp-json\/wp\/v2\/posts\/14083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inetmar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inetmar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inetmar.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inetmar.com\/blog\/wp-json\/wp\/v2\/comments?post=14083"}],"version-history":[{"count":6,"href":"https:\/\/www.inetmar.com\/blog\/wp-json\/wp\/v2\/posts\/14083\/revisions"}],"predecessor-version":[{"id":14092,"href":"https:\/\/www.inetmar.com\/blog\/wp-json\/wp\/v2\/posts\/14083\/revisions\/14092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inetmar.com\/blog\/wp-json\/wp\/v2\/media\/14087"}],"wp:attachment":[{"href":"https:\/\/www.inetmar.com\/blog\/wp-json\/wp\/v2\/media?parent=14083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inetmar.com\/blog\/wp-json\/wp\/v2\/categories?post=14083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inetmar.com\/blog\/wp-json\/wp\/v2\/tags?post=14083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}