Ich habe eine eigene TV Seite gebaut wo ich dann Lokal über den Browser Safari unter MacOS Mojave TV kucke. Das läuft auch soweit gut. Mein Problem ist wenn ich über diese Seite dann den Stream beende läuft der Stream im Hintergrund weiter. Nur durch refresh der Seite wird der Stream beenden oder ich beende den Stream über TVheadend unter Status/Connections. Wie kann ich das beheben? Ich finde im Netz dazu keine Lösung

index.html


<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>© 2019 Free TV Liste™</title>

   <!-- optimize mobile versions -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- The index.html skin -->
  <link rel="stylesheet" href="dist/index.css" />

  <!-- The Flowplayer skin -->
  <link rel="stylesheet" href="https://releases.flowplayer.org/7.2.7/skin/skin.css">

  <!-- Flowplayer depends on jquery for video tag based setups -->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <!-- hls.js -->
  <script src="https://cdn.jsdelivr.net/npm/hls.js@0.11.0/dist/hls.light.min.js"></script>

  <!-- Flowplayer-->
  <script src="https://releases.flowplayer.org/7.2.1/flowplayer.min.js"></script>

  <!-- bootstrap modal vendor stylesheet -->
  <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

  <!-- bootstrap modal vendor script -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous">
  </script>

  <!-- the overlay plugin -->
  <script src="https://releases.flowplayer.org/overlay/flowplayer.overlay.min.js"></script>

  <!-- the bootstrap vendor overlay wrapper -->
  <script src="https://releases.flowplayer.org/overlay/vendors/flowplayer.overlay.bootstrap.js"></script>

</head>

<body>

<div id=page-wrapper >
<h1>© 2019 Free TV Liste™</h1>
  <details id=custom>
  <summary>öfentrechtliche</summary>
    <table>
      <tr>
      <th>
        <a id="DasErste-trigger" class="imageHold"><img src="Logos/Das Erste.png" /></a><div id="DasErste"></div>
        <a id="ZDF-trigger" class="imageHold"><img src="Logos/ZDF.png" /></a><div id="ZDF"></div>

        <a id="DasErsteHD-trigger" class="imageHold"><img src="Logos/Das Erste HD.png" /></a><div id="DasErsteHD"></div>
        <a id="ZDFHD-trigger" class="imageHold"><img src="Logos/ZDF HD.png" /></a><div id="ZDFHD"></div>
        <a id="_3sat-trigger" class="imageHold"><img src="Logos/3sat.png" /></a><div id="_3sat"></div>
        <a id="_3satHD-trigger" class="imageHold"><img src="Logos/3sat HD.png" /></a><div id="_3satHD"></div>
      </td>
      </tr>
    </table>
  </details>

  <details id=custom>
  <summary>Narichten</summary>
    <table>
      <tr>
      <th>
        <a id="welt-trigger" class="imageHold"><img src="Logos/Welt.png" /></a><div id="welt"></div>
        <a id="n-tv-trigger" class="imageHold"><img src="Logos/n-tv.png" /></a><div id="n-tv"></div>
      </td>
      </tr>
    </table>
  </details>

  <details id=custom>
  <summary>Dokus</summary>
    <table>
      <tr>
      <th>
        <a id="DMAX-trigger" class="imageHold"><img src="Logos/DMAX.png" /></a><div id="DMAX"></div>
        <a id="N24DOKU-trigger" class="imageHold"><img src="Logos/N24 DOKU.png" /></a><div id="N24DOKU"></div>
        <a id="kabeleinsDoku-trigger" class="imageHold"><img src="Logos/kabel eins Doku.png" /></a><div id="kabeleinsDoku"></div>
        <a id="TLC-trigger" class="imageHold"><img src="Logos/TLC.png" /></a><div id="TLC"></div>
        <a id="_3sat-trigger" class="imageHold"><img src="Logos/3sat.png" /></a><div id="_3sa"></div>
        <a id="_3satHD-trigger" class="imageHold"><img src="Logos/3satHD HD.png" /></a><div id="_3satHD"></div>
      </td>
      </tr>
    </table>
  </details>

  <details id=custom>
  <summary>Private</summary>
    <table>
    <tr>
      <th>
        <a id="vox-trigger" class="imageHold"><img src="Logos/Vox.png" /></a><div id="vox"></div>
        <a id="sat1-trigger" class="imageHold"><img src="Logos/SAT.1.png" /></a><div id="sat1"></div>
        <a id="sat1gold-trigger" class="imageHold"><img src="Logos/SAT.1 Gold.png" /></a><div id="sat1gold"></div>
        <a id="RTLTelevision-trigger" class="imageHold"><img src="Logos/RTL Television.png" /></a><div id="RTLTelevision"></div>
        <a id="RTL2-trigger" class="imageHold"><img src="Logos/RTL2.png" /></a><div id="RTL2"></div>
        <a id="RTLplus-trigger" class="imageHold"><img src="Logos/RTLplus.png" /></a><div id="RTLplus"></div>
        <a id="NITRO-trigger" class="imageHold"><img src="Logos/NITRO.png" /></a><div id="NITRO"></div>
        <a id="SUPERRTL-trigger" class="imageHold"><img src="Logos/SUPER RTL.png" /></a><div id="SUPERRTL"></div>
        <a id="ProSieben-trigger" class="imageHold"><img src="Logos/ProSieben.png" /></a><div id="ProSieben"></div>
        <a id="Pro7MAXX-trigger" class="imageHold"><img src="Logos/Pro7 MAXX.png" /></a><div id="Pro7MAXX"></div>
        <a id="kabeleins-trigger" class="imageHold"><img src="Logos/kabel eins.png" /></a><div id="kabeleins"></div>
        <a id="TOGGOplus-trigger" class="imageHold"><img src="Logos/TOGGO plus.png" /></a><div id="TOGGOplus"></div>
        <a id="SIXX-trigger" class="imageHold"><img src="Logos/SIXX.png" /></a><div id="SIXX"></div>
        <a id="ANIXESD-trigger" class="imageHold"><img src="Logos/ANIXE SD.png" /></a><div id="ANIXESD"></div>
        <a id="TELE5-trigger" class="imageHold"><img src="Logos/TELE 5.png" /></a><div id="TELE5"></div>
      </td>
      </tr>
    </table>
  </details>
</div> <!-- page-wrapper -->

</body>

  <!-- The Sender list script -->
  <script src="dist/sender.js"></script>

</html>

</code></pre>

index.css


    *, *:before, *:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    body {
        background: #333;
    }

    html {font-family: Helvetica, Arial, sans-serif;
        font-size: 100%;
        background: #333;
        -webkit-font-smoothing: antialiased;
    }

    #page-wrapper {
        width: 100%;
        background: #FFFFFF;
        padding: 1em;
        margin: 1em auto;
        border-top: 5px solid #69c773;
        box-shadow: 0 2px 10px rgba(0,0,0,0.8);
    }

    a.imageHold img {
        width: 150px;  /* wir skalieren das große bild auf die kleine größe */
        filter: grayscale(100%); /* Standard */
        -webkit-filter: grayscale(100%); /* Webkit */
        filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
        filter: gray;  /* IE6-9 */
        -webkit-filter: grayscale(1); /* Old WebKit */
    }

    a.imageHold img:hover {
        width: 150px;       /* die weite beim vergrößern */
        filter: grayscale(0%);
        filter: none;
        -webkit-filter: grayscale(0); /* Old WebKit */
    }

    h1 {
        margin: 5px 50px;
    }

    h2 {
        margin: 1em 0;
        font-size: 1em;
    }

    details {
        background: #333;color: #FFF;
        margin: 1em 0;
    }

    #custom summary {
        border-radius: 3px;padding: 5px 10px;
        outline: none;
    }

    iframe {background: #FFFFFF;
        height:400;
        width:100%;
    }

    details[open] summary:before {
        transform: rotate(90deg);
    }

    details summary:hover {
        background: #69c773;
        color: #007bff;
    }

    details[open] > summary {
        color: #007bff;
    }

    details[open] > summary ~ * {
        animation: open 1s ease;
        background: #FFFFFF;
    }

    @keyframes open {
        0% {opacity: 0; }
        100% {opacity: 1; }
    }

    details[open] summary {
        background: #69c773;
    }

    table {
        border: 0;
        width: 100%;
    }

    th, td {
        vertical-align: top;
        text-align: left;
        padding: 0.5em;
        border-bottom: 1px solid #E6E6E6;
        background: #333;
        color: #FFF;
    }

    th {
        width: 265px;
    }

	.flowplayer .fp-playbtn, .fp-timeline, .fp-duration, .fp-elapsed, .fp-pause, .fp-share {
  		display: none;
	}
});

sender.js


flowplayer.conf.share = false;
flowplayer(function (api, root) {
  $(".fp-ui", root).click(function (ev) {
    if ($(ev.target).hasClass("fp-ui")) {
      ev.stopPropagation();
    }
  });
});

flowplayer("#DasErste", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#DasErste-trigger",
        vendor: "bootstrap",
        title: "Das Erste",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/ecf46ebc207038005a065daf3247df4e?title=20%20%3A%20Das%20Erste" }
        ]
    }
});

flowplayer("#ZDF", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#ZDF-trigger",
        vendor: "bootstrap",
        title: "ZDF",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/7943a1c0773537cb5b190412f617aaac?title=21%20%3A%20ZDF" }
        ]
    }
});

flowplayer("#DasErsteHD", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#DasErsteHD-trigger",
        vendor: "bootstrap",
        title: "Das Erste HD",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/9d02bf69108bb7e34941d49fca2d9046?title=36%20%3A%20Das%20Erste%20HD" }
        ]
    }
});

flowplayer("#ZDFHD", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#ZDFHD-trigger",
        vendor: "bootstrap",
        title: "ZDF HD",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/777a96f88f427085e798716bda174ce9?title=40%20%3A%20ZDF%20HD" }
        ]
    }
});

flowplayer("#_3sat", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#_3sat-trigger",
        vendor: "bootstrap",
        title: "3sat",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/da7f850afa39a53d6d464f280c40ad48?title=3%20%3A%203sat" }
        ]
    }
});

flowplayer("#_3satHD", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#_3satHD-trigger",
        vendor: "bootstrap",
        title: "3sat HD",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/c13602ef9647b05ee56a16c394015572?title=38%20%3A%203sat%20HD" }
        ]
    }
});

flowplayer("#welt", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#welt-trigger",
        vendor: "bootstrap",
        title: "Welt",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/9ab2ebf43ec09dc6275d51ce041ad62b?title=44%20%3A%20WELT" }
        ]
    }
});

flowplayer("#n-tv", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#n-tv-trigger",
        vendor: "bootstrap",
        title: "n-tv",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/18d0a8b351bff673ed3735e09a741d84?title=13%20%3A%20n-tv"}
        ]
    }
});

flowplayer("#DMAX", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#DMAX-trigger",
        vendor: "bootstrap",
        title: "DMAX",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/2cdf97c9cd23dd77fc739eadfd55d70b?title=23%20%3A%20DMAX" }
        ]
    }
});

flowplayer("#N24DOKU", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#N24DOKU-trigger",
        vendor: "bootstrap",
        title: "N24 DOKU",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/ff86f035db8bf59d2e3c3fa012d56a28?title=15%20%3A%20N24%20DOKU" }
        ]
    }
});

flowplayer("#kabeleinsDoku", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#kabeleinsDoku-trigger",
        vendor: "bootstrap",
        title: "Kabel eins Doku",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/08466c344211fc2b16369556244bc05e?title=14%20%3A%20kabel%20eins%20Doku" }
        ]
    }
});

flowplayer("#TLC", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#TLC-trigger",
        vendor: "bootstrap",
        title: "TLC",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/6331ca69481eb098a65838b3b01f6057?title=37%20%3A%20TLC" }
        ]
    }
});

flowplayer("#arte", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#arte-trigger",
        vendor: "bootstrap",
        title: "arte",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/4c583269cfd41e09c21ba1cfcb15ab7b?title=35%20%3A%20arte" }
        ]
    }
});

flowplayer("#arteHD", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#arteHD-trigger",
        vendor: "bootstrap",
        title: "arte HD",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/fef4645cf29f1ccc08d3d5d476605b4b?title=28%20%3A%20arte%20HD" }
        ]
    }
});

flowplayer("#vox", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#vox-trigger",
        vendor: "bootstrap",
        title: "Vox",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/05b7f6da40580fcd36389ad9a34d0ad9?title=27%20%3A%20VOX" }
        ]
    }
});

flowplayer("#sat1", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#sat1-trigger",
        vendor: "bootstrap",
        title: "Sat 1",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/67f611e2f7149f519ad9b2aab57414d5?title=30%20%3A%20SAT.1" }
        ]
    }
});

flowplayer("#sat1gold", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#sat1gold-trigger",
        vendor: "bootstrap",
        title: "Sat 1 Gold",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/053045e8a4620ba618a7cd422b36b7a1?title=34%20%3A%20SAT.1%20Gold" }
        ]
    }
});

flowplayer("#RTLTelevision", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#RTLTelevision-trigger",
        vendor: "bootstrap",
        title: "RTL Television",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/078e51ad4c060774c681a0fbb8aa437c?title=11%20%3A%20RTL%20Television" }
        ]
    }
});

flowplayer("#RTL2", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#RTL2-trigger",
        vendor: "bootstrap",
        title: "RTL2",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/eb76e5fae260aa3793855140e568fd55?title=41%20%3A%20RTL2" }
        ]
    }
});

flowplayer("#RTLplus", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#RTLplus-trigger",
        vendor: "bootstrap",
        title: "RTLplus",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/644a6a06113ddd219180737f00fd2cd7?title=1%20%3A%20RTLplus" }
        ]
    }
});

flowplayer("#NITRO", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#NITRO-trigger",
        vendor: "bootstrap",
        title: "NITRO",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/17bb9e38f243cb8606649a84c2be9549?title=18%20%3A%20NITRO" }
        ]
    }
});

flowplayer("#SUPERRTL", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#SUPERRTL-trigger",
        vendor: "bootstrap",
        title: "SUPER RTL",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/6a9adffc413e4d516c39a17609a57394?title=43%20%3A%20SUPER%20RTL" }
        ]
    }
});

flowplayer("#ProSieben", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#ProSieben-trigger",
        vendor: "bootstrap",
        title: "ProSieben",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/38b776dd1d0b110a1239f587975a7b51?title=29%20%3A%20ProSieben" }
        ]
    }
});

flowplayer("#Pro7MAXX", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#Pro7MAXX-trigger",
        vendor: "bootstrap",
        title: "Pro7 MAXX",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/51ff7466098e9488430a8d2a777eb1a9?title=32%20%3A%20Pro7%20MAXX" }
        ]
    }
});

flowplayer("#kabeleins", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#kabeleins-trigger",
        vendor: "bootstrap",
        title: "kabel eins",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/10a8929019c51b5f312c0ff8e7594037?title=4%20%3A%20kabel%20eins" }
        ]
    }
});

flowplayer("#TOGGOplus", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#TOGGOplus-trigger",
        vendor: "bootstrap",
        title: "TOGGO plus",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/dfa6e3b70e004f2dc5197b4bc4cca521?title=16%20%3A%20TOGGO%20plus" }
        ]
    }
});

flowplayer("#SIXX", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#SIXX-trigger",
        vendor: "bootstrap",
        title: "SIXX",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/106976e79c5c69f1c37002bbe82197cb?title=33%20%3A%20SIXX" }
        ]
    }
});

flowplayer("#ANIXESD", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#ANIXESD-trigger",
        vendor: "bootstrap",
        title: "ANIXE SD",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/9d20289b300b7012690234ca3764e2c2?title=7%20%3A%20ANIXE%2B" }
        ]
    }
});

flowplayer("#TELE5", {
    ratio: 9/16,
    keyboard: false,
    overlay: {
        trigger: "#TELE5-trigger",
        vendor: "bootstrap",
        title: "TELE 5",
        size: "lg"
    },

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "http://192.168.2.186:9981/play/stream/channel/3dc32c239c4aac7ed03d1e5ea4050f53?title=8%20%3A%20TELE%205" }
        ]
    }
});

Tvheadend läuft auf ein Raspberry PI. Testsystem ist ein Mac Mini mit Mojave. Test Browser Safari. Bei Chrome und Firefox wird kein Stream gestartet und bei TVheadend wird auch kein Stream unter Status Angezeigt so ob Chrome und Firefox mit den Stream Link nicht klarkommen.