<!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="shortcut icon" href="/freecity/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>/video1 Qora</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 20px;
                text-align: center;
                background-color: #f4f4f4;
            }
            #media-container {
                margin-top: 20px;
            }
            video {
                max-width: 100%;
                height: auto;
                border: 1px solid #ccc;
                padding: 5px;
                background-color: #f9f9f9;
            }
            label {
                display: block;
                margin-bottom: 10px;
                font-size: 1.2em;
            }
            select {
                padding: 8px;
                font-size: 1em;
                border-radius: 4px;
                border: 1px solid #ccc;
                background-color: #fff;
            }
            a {
                text-decoration: none;
                display: inline-block;
                padding: 8px 16px;
                border-radius: 4px;
                color: white;
                background-color: #198964;
                transition: background-color 0.3s, color 0.3s;
                margin: 5px;
            }
            a:hover {
                background-color: #ddd;
                color: black;
            }
            .previous {
                background-color: #198964;
                color: #c1c1c1;
            }
            .next {
                background-color: #198964;
                color: white;
            }
            .round {
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <h1>
            <a href="/0x0y0z" class="previous round">&#8249;</a>
             /video1 Qora 
            <a href="/video2" class="next round">&#8250;</a>
        </h1>
    
        <label for="ipfs-node">Select IPFS Node:</label>
        <select id="ipfs-node" onchange="loadMedia()">
            <option value="https://ipfs.io/ipfs/">IPFS Public Gateway</option>
            <option value="http://localhost:8080/ipfs/">Qora & :8080_IPFS both localhost</option>
            <option value="https://gateway.pinata.cloud/ipfs/">Pinata Gateway</option>
            <option value="https://dweb.link/ipfs/">dweb.link Gateway</option>
        </select>
    
        <div id="media-container">
            <video id="ipfs-video" controls>
                Your browser does not support the video tag.
            </video>
        </div>
    
        <script>
            const hash = 'QmS4CRRNVTXutMP4hVDWCtRFVLDP9ipNd7ynaZkNv78x2A';
    
            function loadMedia() {
                const node = document.getElementById('ipfs-node').value;
                const videoUrl = `${node}${hash}`;
                const video = document.getElementById('ipfs-video');
                video.src = videoUrl;
                video.load();  // Reload video source
                video.onerror = function() {
                    alert('Error loading video. Please check the URL or try a different IPFS node.');
                };
            }
    
            // Load the video initially with the default node
            window.onload = loadMedia;
        </script>
    
        <p> Marina Sands, Singapore.<a href="/index/blockexplorer.html?block=1010025" title="/video1 for sale blockchain transaction">/video1</a> QNS for sale.</p>
    </body>
    </html>