{"id":32661,"date":"2022-09-10T16:40:20","date_gmt":"2022-09-10T19:40:20","guid":{"rendered":"https:\/\/www.radiopresidenteibanez.cl\/web\/?page_id=32661"},"modified":"2025-12-27T03:03:37","modified_gmt":"2025-12-27T06:03:37","slug":"video-online","status":"publish","type":"page","link":"https:\/\/www.radiopresidenteibanez.cl\/web\/video-online\/","title":{"rendered":"VIDEO ONLINE"},"content":{"rendered":"\n<div class=\"simple-video-player\">\n    <!-- Video Container -->\n    <div class=\"video-container\" id=\"videoContainer\">\n        <video id=\"videoPlayer\" class=\"video-element\" controls playsinline>\n            Tu navegador no soporta video HTML5.\n        <\/video>\n        \n        <!-- Overlay personalizado -->\n        <div class=\"video-overlay\" id=\"videoOverlay\">\n            <!-- Bot\u00f3n play grande -->\n            <button class=\"big-play-btn\" id=\"bigPlayBtn\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                    <path d=\"M8 5v14l11-7z\"\/>\n                <\/svg>\n            <\/button>\n            \n            <!-- Controles inferiores -->\n            <div class=\"bottom-controls\">\n                <div class=\"left-controls\">\n                    <button class=\"control-btn play-btn\" id=\"playPauseBtn\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"white\">\n                            <path id=\"playIcon\" d=\"M8 5v14l11-7z\"\/>\n                        <\/svg>\n                    <\/button>\n                    \n                    <div class=\"time-display\">\n                        <span id=\"currentTime\">00:00<\/span>\n                        <span class=\"live-badge\">LIVE<\/span>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"right-controls\">\n                    <button class=\"control-btn volume-btn\" id=\"volumeBtn\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"white\">\n                            <path id=\"volumeIcon\" d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"\/>\n                        <\/svg>\n                    <\/button>\n                    \n                    <button class=\"control-btn fullscreen-btn\" id=\"fullscreenBtn\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"white\">\n                            <path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\"\/>\n                        <\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n            \n            <!-- Barra de progreso -->\n            <div class=\"progress-container\">\n                <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- Indicador de carga -->\n        <div class=\"loading\" id=\"loadingIndicator\">\n            <div class=\"spinner\"><\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- Informaci\u00f3n del stream -->\n    <div class=\"stream-info\">\n        <h3>Radio Presidente Iba\u00f1ez TV<\/h3>\n        <p>Transmisi\u00f3n en vivo 24\/7 \u2022 <span id=\"streamStatus\">Conectando&#8230;<\/span><\/p>\n    <\/div>\n<\/div>\n\n<!-- Incluir HLS.js -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@latest\"><\/script>\n\n<style>\n.simple-video-player {\n    max-width: 800px;\n    margin: 20px auto;\n    background: #000;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);\n}\n\n.video-container {\n    position: relative;\n    width: 100%;\n    background: #000;\n    aspect-ratio: 16\/9;\n}\n\n.video-element {\n    width: 100%;\n    height: 100%;\n    display: block;\n    background: #000;\n}\n\n.video-element::-webkit-media-controls {\n    display: none !important;\n}\n\n\/* Overlay y controles *\/\n.video-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(\n        to bottom,\n        transparent 60%,\n        rgba(0, 0, 0, 0.8) 100%\n    );\n    opacity: 1;\n    transition: opacity 0.3s;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n\n.video-container:hover .video-overlay {\n    opacity: 1;\n}\n\n\/* Bot\u00f3n play grande *\/\n.big-play-btn {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background: rgba(0, 0, 0, 0.7);\n    border: 2px solid rgba(255, 255, 255, 0.3);\n    width: 70px;\n    height: 70px;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s;\n}\n\n.big-play-btn:hover {\n    background: rgba(0, 0, 0, 0.9);\n    border-color: white;\n    transform: translate(-50%, -50%) scale(1.1);\n}\n\n\/* Controles inferiores *\/\n.bottom-controls {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 15px 20px;\n    background: rgba(0, 0, 0, 0.8);\n}\n\n.left-controls,\n.right-controls {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n}\n\n.control-btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 8px;\n    border-radius: 6px;\n    transition: background 0.3s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.control-btn:hover {\n    background: rgba(255, 255, 255, 0.1);\n}\n\n\/* Time display *\/\n.time-display {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    color: white;\n    font-family: monospace;\n    font-size: 14px;\n}\n\n.live-badge {\n    background: #ff4757;\n    color: white;\n    font-size: 12px;\n    font-weight: bold;\n    padding: 2px 8px;\n    border-radius: 4px;\n    animation: pulse 1.5s infinite;\n}\n\n@keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.7; }\n}\n\n\/* Barra de progreso *\/\n.progress-container {\n    width: 100%;\n    height: 4px;\n    background: rgba(255, 255, 255, 0.2);\n    cursor: pointer;\n}\n\n.progress-bar {\n    height: 100%;\n    width: 0%;\n    background: linear-gradient(90deg, #3498db, #2ecc71);\n    transition: width 0.1s;\n}\n\n\/* Indicador de carga *\/\n.loading {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: none;\n}\n\n.spinner {\n    width: 40px;\n    height: 40px;\n    border: 3px solid rgba(255, 255, 255, 0.1);\n    border-top: 3px solid #3498db;\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n\/* Info del stream *\/\n.stream-info {\n    padding: 15px 20px;\n    background: #1a1a1a;\n    color: white;\n}\n\n.stream-info h3 {\n    margin: 0 0 5px 0;\n    color: #3498db;\n    font-size: 18px;\n}\n\n.stream-info p {\n    margin: 0;\n    font-size: 14px;\n    color: #aaa;\n}\n\n#streamStatus {\n    color: #2ecc71;\n    font-weight: bold;\n}\n\n\/* Estados *\/\n.playing .big-play-btn {\n    opacity: 0;\n    pointer-events: none;\n}\n\n.loading .spinner {\n    display: block;\n}\n\n\/* Responsive *\/\n@media (max-width: 600px) {\n    .simple-video-player {\n        border-radius: 0;\n    }\n    \n    .big-play-btn {\n        width: 60px;\n        height: 60px;\n    }\n    \n    .bottom-controls {\n        padding: 10px 15px;\n    }\n}\n\n\/* Pantalla completa *\/\n:fullscreen .video-container {\n    aspect-ratio: unset;\n    height: 100vh;\n}\n<\/style>\n\n<script>\nclass SimpleVideoPlayer {\n    constructor() {\n        this.video = document.getElementById('videoPlayer');\n        this.hls = null;\n        this.isPlaying = false;\n        \n        this.init();\n    }\n    \n    init() {\n        this.bindElements();\n        this.setupVideo();\n        this.setupControls();\n        this.startStream();\n    }\n    \n    bindElements() {\n        this.elements = {\n            bigPlayBtn: document.getElementById('bigPlayBtn'),\n            playPauseBtn: document.getElementById('playPauseBtn'),\n            playIcon: document.getElementById('playIcon'),\n            volumeBtn: document.getElementById('volumeBtn'),\n            volumeIcon: document.getElementById('volumeIcon'),\n            fullscreenBtn: document.getElementById('fullscreenBtn'),\n            progressBar: document.getElementById('progressBar'),\n            currentTime: document.getElementById('currentTime'),\n            streamStatus: document.getElementById('streamStatus'),\n            loadingIndicator: document.getElementById('loadingIndicator'),\n            videoOverlay: document.getElementById('videoOverlay'),\n            videoContainer: document.getElementById('videoContainer')\n        };\n    }\n    \n    setupVideo() {\n        \/\/ Ocultar controles nativos\n        this.video.controls = false;\n        \n        \/\/ Eventos del video\n        this.video.addEventListener('play', () => {\n            this.isPlaying = true;\n            this.updatePlayState();\n            this.updateStatus('EN VIVO', '#2ecc71');\n        });\n        \n        this.video.addEventListener('pause', () => {\n            this.isPlaying = false;\n            this.updatePlayState();\n            this.updateStatus('PAUSADO', '#f39c12');\n        });\n        \n        this.video.addEventListener('waiting', () => {\n            this.showLoading();\n            this.updateStatus('BUFFERING...', '#f39c12');\n        });\n        \n        this.video.addEventListener('canplay', () => {\n            this.hideLoading();\n        });\n        \n        this.video.addEventListener('timeupdate', () => {\n            this.updateProgress();\n        });\n        \n        this.video.addEventListener('volumechange', () => {\n            this.updateVolumeIcon();\n        });\n        \n        \/\/ Actualizar tiempo cada segundo\n        setInterval(() => {\n            this.updateTime();\n        }, 1000);\n    }\n    \n    setupControls() {\n        \/\/ Play\/Pause\n        this.elements.bigPlayBtn.addEventListener('click', () => this.togglePlay());\n        this.elements.playPauseBtn.addEventListener('click', () => this.togglePlay());\n        \n        \/\/ Volumen\n        this.elements.volumeBtn.addEventListener('click', () => this.toggleMute());\n        \n        \/\/ Pantalla completa\n        this.elements.fullscreenBtn.addEventListener('click', () => this.toggleFullscreen());\n        \n        \/\/ Barra de progreso\n        this.elements.progressBar.parentElement.addEventListener('click', (e) => {\n            const rect = e.target.getBoundingClientRect();\n            const percent = (e.clientX - rect.left) \/ rect.width;\n            this.video.currentTime = percent * this.video.duration;\n        });\n        \n        \/\/ Click en el video para play\/pause\n        this.video.addEventListener('click', () => this.togglePlay());\n        \n        \/\/ Teclas\n        document.addEventListener('keydown', (e) => {\n            if (e.code === 'Space') {\n                e.preventDefault();\n                this.togglePlay();\n            }\n        });\n    }\n    \n    startStream() {\n        const streamUrl = 'https:\/\/ibanez.servercl.com\/hls\/live.m3u8';\n        \n        if (Hls.isSupported()) {\n            this.hls = new Hls({\n                enableWorker: true,\n                lowLatencyMode: true,\n                autoStartLoad: true\n            });\n            \n            this.hls.loadSource(streamUrl);\n            this.hls.attachMedia(this.video);\n            \n            this.hls.on(Hls.Events.MANIFEST_PARSED, () => {\n                this.updateStatus('LISTO', '#2ecc71');\n                this.video.play().catch(e => {\n                    console.log('Autoplay bloqueado');\n                });\n            });\n            \n            this.hls.on(Hls.Events.ERROR, (event, data) => {\n                console.error('Error HLS:', data);\n                if (data.fatal) {\n                    this.updateStatus('ERROR DE CONEXI\u00d3N', '#e74c3c');\n                }\n            });\n            \n        } else if (this.video.canPlayType('application\/vnd.apple.mpegurl')) {\n            \/\/ Safari\n            this.video.src = streamUrl;\n            this.updateStatus('LISTO', '#2ecc71');\n            this.video.addEventListener('loadedmetadata', () => {\n                this.video.play();\n            });\n        } else {\n            this.updateStatus('NAVEGADOR NO COMPATIBLE', '#e74c3c');\n        }\n    }\n    \n    togglePlay() {\n        if (this.isPlaying) {\n            this.video.pause();\n        } else {\n            this.video.play();\n        }\n    }\n    \n    toggleMute() {\n        this.video.muted = !this.video.muted;\n        this.updateVolumeIcon();\n    }\n    \n    toggleFullscreen() {\n        if (!document.fullscreenElement) {\n            this.elements.videoContainer.requestFullscreen();\n        } else {\n            document.exitFullscreen();\n        }\n    }\n    \n    updatePlayState() {\n        if (this.isPlaying) {\n            this.elements.playIcon.setAttribute('d', 'M6 19h4V5H6v14zm8-14v14h4V5h-4z');\n            this.elements.videoContainer.classList.add('playing');\n        } else {\n            this.elements.playIcon.setAttribute('d', 'M8 5v14l11-7z');\n            this.elements.videoContainer.classList.remove('playing');\n        }\n    }\n    \n    updateVolumeIcon() {\n        if (this.video.muted) {\n            this.elements.volumeIcon.setAttribute('d', 'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z');\n        } else {\n            this.elements.volumeIcon.setAttribute('d', 'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z');\n        }\n    }\n    \n    updateProgress() {\n        if (this.video.duration) {\n            const percent = (this.video.currentTime \/ this.video.duration) * 100;\n            this.elements.progressBar.style.width = `${percent}%`;\n        }\n    }\n    \n    updateTime() {\n        if (this.video.duration) {\n            const current = this.formatTime(this.video.currentTime);\n            this.elements.currentTime.textContent = current;\n        }\n    }\n    \n    formatTime(seconds) {\n        const mins = Math.floor(seconds \/ 60);\n        const secs = Math.floor(seconds % 60);\n        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n    }\n    \n    updateStatus(text, color) {\n        this.elements.streamStatus.textContent = text;\n        this.elements.streamStatus.style.color = color;\n    }\n    \n    showLoading() {\n        this.elements.loadingIndicator.style.display = 'block';\n    }\n    \n    hideLoading() {\n        this.elements.loadingIndicator.style.display = 'none';\n    }\n}\n\n\/\/ Inicializar cuando el DOM est\u00e9 listo\ndocument.addEventListener('DOMContentLoaded', () => {\n    new SimpleVideoPlayer();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Tu navegador no soporta video HTML5. 00:00 LIVE Radio Presidente Iba\u00f1ez TV Transmisi\u00f3n en vivo 24\/7 \u2022 Conectando&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-32661","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/pages\/32661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/comments?post=32661"}],"version-history":[{"count":0,"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/pages\/32661\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/media?parent=32661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}