使用 jquery 更改视频文件

Question

我有一个简单的视频播放器

<video id="video" src="http://xyx.com/zzz.m3u8" 
controls="controls" width="480" height="280"></video>

我希望能够通过点击链接来更改视频流，例如

<a href="#">Stream A</a>
<a href="#">Stream B</a>
<a href="#">Stream C</a>

我该怎么做？通过每个链接，我还必须通过新流。

Answer 1

<a href="#" data-src="/source/for/video1.mp4">Stream A</a>
<a href="#" data-src="/source/for/video2.mp4">Stream B</a>
<a href="#" data-src="/source/for/video3.mp4">Stream C</a>

--

$('a').on('click', function(e) {
    e.preventDefault()
    $('#video').attr('src', $(this).data('src'));
});

Answer 2

这是一个可行的解决方案：

        index.html

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>    
        <title>Ipad Video TV v.1.5</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <style>
 body, div {
  padding: 0;
  margin: 0; }

#wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; }

#divplayer {
  width: 500px;
  height: 100%;
  position:fixed;
  left: 240px;
  top: 90px;
  text-align: left; }


#scroll {
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: #000;
  height: 10px;
  width: 200px;
  z-index: -1; }

#mscroll li {
    background-color: #FFFFFF;
    border: 1px solid rgb(11,47,99);
    color: #061A38;
    display: block;
    padding: 1px 1px 1px 10px;
    margin-left:5px;
    margin-bottom:-5px;
    text-decoration: none;
    width: 155px;
    cursor: pointer;

    text-indent: 5px;
    font: bold 12px Verdana;
}

#mscroll a
{
    color:#061A38;
    text-decoration: none;
}

#mscroll a:hover li
{
    color: #061A38; 
    background: #65B5DF; <!-- rgb(153,249,75); --> 
}

   </style>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
           <script src="main.js" type="text/javascript"></script>
        </head>
        <body bgcolor="#000000" onLoad="init()">

            <div id="wrapper">
                <div id="header"></div>
                <div id="divplayer"></div>

                <div id="scroll"></div>
                <div id="mscroll"></div>
                <ul class="svertical"></div>

        </body>
        </html>​

        main.js
    // properties
    var XML_PATH = "config.xml";
    var video_width;
    var video_height;
    var videos_array=new Array();
    // init the application
    function init()
    {
        // call loadXML function
        loadXML();
    }
    // XML loading
    function loadXML()
    {
        $.ajax({
                type: "GET",
                url: XML_PATH,
                dataType: "xml",
                success: function onXMLloaded(xml)
                {
                    // set video_width and video_height
                    video_width=$(xml).find("videos").attr("width");
                    video_height=$(xml).find("videos").attr("height");

                    // loop for each item
                    $(xml).find('item').each(function loopingItems(value)
                    {
                        // create an object
                        var obj={title:$(this).find("title").text(), mp4:$(this).find("mp4").text()};
                        //, ogg:$(this).find("ogg").text(), description:$(this).find("description").text()};
                        videos_array.push(obj);

                        // append <ul> and video title
                        $("#mscroll").append('<ul>');
                        //value
                        $("#mscroll").append('<a><li>'+obj.title+'</li></a>');
                    });

                    // close </ul>
                    $("#mscroll").append('</ul>');
                    // call addListeners function
                    addListeners();
                }
        });
    }

    // add <li> listener
    function addListeners()
    {
        // loop for each list item
        $('#mscroll li').each(function looping(index)
        {
            // onclick...
            $(this).click(function onItemClick()
            {
                // empty left column and description
                $("#divplayer").empty();
                // append video tag
                $("#divplayer").append('<video width="'+video_width+'" height="'+video_height+'" controls="controls"><source src="'+videos_array[index].mp4+'" autoplay/></video>');
            });
        });
    }

    config.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <videos width="440" height="280">
        <item>
            <title>REALITATEA TV</title>
            <mp4>http://fms3.mediadirect.ro/live3/_definst_/realitatea/playlist.m3u8?publisher=6</mp4>
        </item>
    </videos>

这会从 xml 加载视频，构建一个菜单并在点击时播放每个视频。