{"id":109,"date":"2026-06-23T03:18:24","date_gmt":"2026-06-23T03:18:24","guid":{"rendered":"https:\/\/newsph.site\/?p=109"},"modified":"2026-06-23T03:18:24","modified_gmt":"2026-06-23T03:18:24","slug":"mxc-2","status":"publish","type":"post","link":"https:\/\/newsph.site\/index.php\/2026\/06\/23\/mxc-2\/","title":{"rendered":"MXC 2"},"content":{"rendered":"\n<div id=\"live-tv-wrapper\">\n  <video\n    id=\"live-tv\"\n    controls\n    autoplay\n    muted\n    playsinline\n    preload=\"auto\">\n  <\/video>\n\n  <div id=\"click-to-sound\">\n    <button onclick=\"enableSoundAndFullscreen()\">\u25b6 B\u1ea5m \u0111\u1ec3 b\u1eadt ti\u1ebfng<\/button>\n  <\/div>\n\n  <div id=\"live-status\">\u0110ang t\u1ea3i lu\u1ed3ng&#8230;<\/div>\n<\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@latest\"><\/script>\n\n<script>\n  const STREAM_URL = \"https:\/\/channel01-onlymex.akamaized.net\/hls\/live\/2022749\/event01\/index.m3u8\";\n\n  const video = document.getElementById(\"live-tv\");\n  const wrapper = document.getElementById(\"live-tv-wrapper\");\n  const statusBox = document.getElementById(\"live-status\");\n  const soundBox = document.getElementById(\"click-to-sound\");\n\n  let hls = null;\n  let restartTimer = null;\n\n  function setStatus(text) {\n    statusBox.innerText = text;\n  }\n\n  function showSoundButton() {\n    soundBox.style.display = \"flex\";\n  }\n\n  function hideSoundButton() {\n    soundBox.style.display = \"none\";\n  }\n\n  function goRealFullscreen() {\n    if (wrapper.requestFullscreen) {\n      wrapper.requestFullscreen().catch(() => {});\n    } else if (wrapper.webkitRequestFullscreen) {\n      wrapper.webkitRequestFullscreen();\n    } else if (wrapper.msRequestFullscreen) {\n      wrapper.msRequestFullscreen();\n    }\n  }\n\n  function enableSoundAndFullscreen() {\n    video.muted = false;\n    video.volume = 1;\n\n    goRealFullscreen();\n\n    video.play().then(() => {\n      hideSoundButton();\n      setStatus(\"\u0110ang ph\u00e1t live - \u00e2m thanh \u0111\u00e3 b\u1eadt\");\n    }).catch(() => {\n      showSoundButton();\n      setStatus(\"Tr\u00ecnh duy\u1ec7t ch\u1eb7n \u00e2m thanh, h\u00e3y b\u1ea5m Play\");\n    });\n  }\n\n  function destroyPlayer() {\n    if (hls) {\n      hls.destroy();\n      hls = null;\n    }\n  }\n\n  function startPlayer() {\n    clearTimeout(restartTimer);\n    destroyPlayer();\n\n    setStatus(\"\u0110ang k\u1ebft n\u1ed1i lu\u1ed3ng live...\");\n\n    video.muted = true;\n    video.volume = 1;\n\n    if (Hls.isSupported()) {\n      hls = new Hls({\n        enableWorker: true,\n\n        \/\/ \u0110\u1ec3 HLS t\u1ef1 ch\u1ecdn ch\u1ea5t l\u01b0\u1ee3ng theo t\u1ed1c \u0111\u1ed9 m\u1ea1ng\n        startLevel: -1,\n        capLevelToPlayerSize: false,\n        testBandwidth: true,\n\n        \/\/ Buffer d\u00e0i h\u01a1n \u0111\u1ec3 gi\u1ea3m gi\u1eadt\/lag\n        maxBufferLength: 90,\n        maxMaxBufferLength: 180,\n        backBufferLength: 60,\n\n        \/\/ Live \u1ed5n \u0111\u1ecbnh h\u01a1n, ch\u1ea5p nh\u1eadn tr\u1ec5 h\u01a1n m\u1ed9t ch\u00fat \u0111\u1ec3 \u00edt \u0111\u1ee9ng h\u00ecnh\n        liveSyncDurationCount: 6,\n        liveMaxLatencyDurationCount: 18,\n\n        \/\/ Retry m\u1ea1nh h\u01a1n n\u1ebfu m\u1ea1ng\/CDN l\u1ed7i\n        manifestLoadingMaxRetry: 30,\n        manifestLoadingRetryDelay: 1000,\n        manifestLoadingMaxRetryTimeout: 15000,\n\n        levelLoadingMaxRetry: 30,\n        levelLoadingRetryDelay: 1000,\n        levelLoadingMaxRetryTimeout: 15000,\n\n        fragLoadingMaxRetry: 30,\n        fragLoadingRetryDelay: 1000,\n        fragLoadingMaxRetryTimeout: 15000\n      });\n\n      hls.loadSource(STREAM_URL);\n      hls.attachMedia(video);\n\n      hls.on(Hls.Events.MANIFEST_PARSED, function () {\n        \/\/ Auto quality, kh\u00f4ng \u00e9p m\u1ee9c cao nh\u1ea5t \u0111\u1ec3 tr\u00e1nh lag\n        hls.currentLevel = -1;\n        hls.nextLevel = -1;\n        hls.loadLevel = -1;\n        hls.autoLevelCapping = -1;\n\n        let maxHeight = 0;\n\n        if (hls.levels && hls.levels.length > 0) {\n          hls.levels.forEach(function(level) {\n            if (level.height && level.height > maxHeight) {\n              maxHeight = level.height;\n            }\n          });\n\n          if (maxHeight > 0) {\n            setStatus(\"\u0110ang ph\u00e1t live - t\u1ef1 \u0111\u1ed9ng ch\u1ecdn ch\u1ea5t l\u01b0\u1ee3ng, t\u1ed1i \u0111a \" + maxHeight + \"p\");\n          } else {\n            setStatus(\"\u0110ang ph\u00e1t live - t\u1ef1 \u0111\u1ed9ng ch\u1ecdn ch\u1ea5t l\u01b0\u1ee3ng\");\n          }\n        } else {\n          setStatus(\"\u0110ang ph\u00e1t live\");\n        }\n\n        video.play().then(() => {\n          showSoundButton();\n          setStatus(\"\u0110ang ph\u00e1t live - b\u1ea5m \u0111\u1ec3 b\u1eadt ti\u1ebfng\");\n        }).catch(() => {\n          showSoundButton();\n          setStatus(\"B\u1ea5m \u0111\u1ec3 ph\u00e1t video\");\n        });\n      });\n\n      hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {\n        const level = hls.levels[data.level];\n\n        if (level && level.height) {\n          setStatus(\"\u0110ang ph\u00e1t live - \" + level.height + \"p \/ Auto\");\n        }\n      });\n\n      hls.on(Hls.Events.ERROR, function (event, data) {\n        console.warn(\"HLS error:\", data);\n\n        if (!data.fatal) return;\n\n        if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {\n          setStatus(\"M\u1ea1ng ho\u1eb7c ngu\u1ed3n l\u1ed7i, \u0111ang k\u1ebft n\u1ed1i l\u1ea1i...\");\n          hls.startLoad();\n        } else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {\n          setStatus(\"L\u1ed7i video, \u0111ang kh\u00f4i ph\u1ee5c...\");\n          hls.recoverMediaError();\n        } else {\n          setStatus(\"Lu\u1ed3ng l\u1ed7i, \u0111ang t\u1ea3i l\u1ea1i...\");\n          restartTimer = setTimeout(startPlayer, 3000);\n        }\n      });\n\n    } else if (video.canPlayType(\"application\/vnd.apple.mpegurl\")) {\n      \/\/ Safari\/iPhone h\u1ed7 tr\u1ee3 HLS tr\u1ef1c ti\u1ebfp\n      video.src = STREAM_URL;\n\n      video.addEventListener(\"loadedmetadata\", function () {\n        video.play().then(() => {\n          showSoundButton();\n          setStatus(\"\u0110ang ph\u00e1t live - b\u1ea5m \u0111\u1ec3 b\u1eadt ti\u1ebfng\");\n        }).catch(() => {\n          showSoundButton();\n          setStatus(\"B\u1ea5m \u0111\u1ec3 ph\u00e1t video\");\n        });\n      });\n    } else {\n      setStatus(\"Tr\u00ecnh duy\u1ec7t n\u00e0y kh\u00f4ng h\u1ed7 tr\u1ee3 HLS.\");\n    }\n  }\n\n  \/\/ T\u1ef1 t\u1ea3i l\u1ea1i n\u1ebfu video b\u1ecb \u0111\u1ee9ng qu\u00e1 l\u00e2u\n  let lastTime = 0;\n  let stuckCount = 0;\n\n  setInterval(function () {\n    if (!video || video.paused || video.ended) return;\n\n    if (video.currentTime === lastTime) {\n      stuckCount++;\n    } else {\n      stuckCount = 0;\n      lastTime = video.currentTime;\n    }\n\n    if (stuckCount >= 12) {\n      setStatus(\"Video b\u1ecb \u0111\u1ee9ng, \u0111ang t\u1ea3i l\u1ea1i lu\u1ed3ng...\");\n      stuckCount = 0;\n      startPlayer();\n    }\n\n    \/\/ N\u1ebfu b\u1ecb tr\u1ec5 live qu\u00e1 xa th\u00ec k\u00e9o v\u1ec1 g\u1ea7n live\n    if (hls && hls.liveSyncPosition && video.currentTime < hls.liveSyncPosition - 35) {\n      video.currentTime = hls.liveSyncPosition;\n    }\n  }, 3000);\n\n  \/\/ Click ho\u1eb7c ch\u1ea1m l\u1ea7n \u0111\u1ea7u: b\u1eadt ti\u1ebfng + v\u00e0o fullscreen th\u1eadt n\u1ebfu tr\u00ecnh duy\u1ec7t cho ph\u00e9p\n  document.addEventListener(\"click\", function () {\n    enableSoundAndFullscreen();\n  }, { once: true });\n\n  document.addEventListener(\"touchstart\", function () {\n    enableSoundAndFullscreen();\n  }, { once: true });\n\n  startPlayer();\n<\/script>\n\n<style>\n  html,\n  body {\n    margin: 0 !important;\n    padding: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n    min-width: 100% !important;\n    min-height: 100% !important;\n    background: #000 !important;\n    overflow: hidden !important;\n  }\n\n  body {\n    position: fixed !important;\n    inset: 0 !important;\n  }\n\n  body * {\n    box-sizing: border-box;\n  }\n\n  #live-tv-wrapper {\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    min-width: 100vw !important;\n    min-height: 100vh !important;\n    background: #000 !important;\n    z-index: 2147483647 !important;\n    overflow: hidden !important;\n  }\n\n  #live-tv {\n    position: absolute !important;\n    top: 50% !important;\n    left: 50% !important;\n\n    width: 100vw !important;\n    height: 100vh !important;\n\n    min-width: 100vw !important;\n    min-height: 100vh !important;\n\n    transform: translate(-50%, -50%) !important;\n\n    background: #000 !important;\n\n    \/* L\u1ea5p k\u00edn m\u00e0n h\u00ecnh tuy\u1ec7t \u0111\u1ed1i *\/\n    object-fit: cover !important;\n    object-position: center center !important;\n\n    display: block !important;\n    border: none !important;\n    outline: none !important;\n  }\n\n  #click-to-sound {\n    position: fixed !important;\n    inset: 0 !important;\n    z-index: 2147483647 !important;\n    display: none;\n    align-items: center;\n    justify-content: center;\n    background: rgba(0,0,0,0.18);\n  }\n\n  #click-to-sound button {\n    padding: 16px 26px;\n    border: none;\n    border-radius: 10px;\n    background: rgba(0,0,0,0.82);\n    color: #fff;\n    font-size: 20px;\n    cursor: pointer;\n  }\n\n  #live-status {\n    position: fixed !important;\n    left: 15px !important;\n    bottom: 15px !important;\n    z-index: 2147483647 !important;\n    padding: 7px 12px;\n    border-radius: 6px;\n    background: rgba(0,0,0,0.65);\n    color: #fff;\n    font-size: 13px;\n    font-family: Arial, sans-serif;\n  }\n\n  #wpadminbar,\n  header,\n  footer,\n  nav,\n  aside,\n  .site-header,\n  .site-footer,\n  .entry-title,\n  .post-title,\n  .sidebar,\n  .widget-area,\n  .comments-area,\n  .navigation,\n  .breadcrumb {\n    display: none !important;\n  }\n\n  html {\n    margin-top: 0 !important;\n  }\n<\/style>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>\u25b6 B\u1ea5m \u0111\u1ec3 b\u1eadt ti\u1ebfng \u0110ang t\u1ea3i lu\u1ed3ng&#8230;<\/p>\n<\/div>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-109","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/newsph.site\/index.php\/wp-json\/wp\/v2\/posts\/109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newsph.site\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/newsph.site\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/newsph.site\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/newsph.site\/index.php\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":1,"href":"https:\/\/newsph.site\/index.php\/wp-json\/wp\/v2\/posts\/109\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/newsph.site\/index.php\/wp-json\/wp\/v2\/posts\/109\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/newsph.site\/index.php\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/newsph.site\/index.php\/wp-json\/wp\/v2\/categories?post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/newsph.site\/index.php\/wp-json\/wp\/v2\/tags?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}