Question

我正在一个简单的流媒体网站工作，并且我需要有人指出我正确的方向或帮助我解决我的问题。

以下场景：该网站是静态的，包含一个菜单，用于从中选择一个div＆＃34; content＆＃34;流应该加载 - 我使用MediaElement.js框架作为我最喜欢的播放器。

这是我的方法：

<html>
    <head>
        <script>
            $('#one').click(function(){
                $('#content').load('one.html');
            });
            $('#two').click(function(){
                $('#content').load('two.html');
            });
            $('#three').click(function(){
                $('#content').load('three.html');
            });
        </script>
    </head>
    <body>
        <ul>
            <li><a href="#one" id="one">one</a></li>
            <li><a href="#two" id="two">two</a></li>
            <li><a href="#three" id="three">three</a></li>
        </ul>
        <div id="content">
            <!-- stream goes here -->
        </div>
    </body>
</html>

我的one.html，two.html和three.html有以下内容（它们只是标题，ID和src不同）：

<video autoplay title="streamtitle" id="streamid" src="http://any/stream/url.m3u8" preload="auto"/>
<script src="mediaelement/build/jquery.js"></script>
<script src="mediaelement/build/mediaelement-and-player.min.js"></script>

问题在于，当我点击流时，之前选择的那些仍然在后台流动并占用带宽。

如何实现之前选择的流 - GET（xhr）请求 - 停止而无需解决方法来简单刷新整个页面？

我已经阅读了很多关于Ajax中止函数的内容，但我是JavaScricpt和jQuery的新手，以实现我的目标。非常感谢你的帮助。

onClick

0 个答案: