Q:

How to call get attribute from a li tag in html file

I want to do is similar to this.
When I click on the "Movie A", I hope the function $('#playlist li').click(function(){...}) will be called, but it seems that nothing happens. What is the problem?
index.html:
<!DOCTYPE html>
<html>
<head>
  <title>Home Video Player</title>
</head>
<body>      
    <video id="video" width="640" height="320" controls="controls">
        Your browser does not support the video tag.
    </video>    
    <ul id="playlist">
        <li movieurl="a,mp4" movietype="video/mp4">Movie A</li>
        <li movieurl="b.mp4" movietype="video/mp4">Movie B</li>          
        <li movieurl="c.mp4" movietype="video/mp4">Movie C</li>      
        <li movieurl="d.mp4" movietype="video/mp4">Movie D</li>
    </ul>       
    <script src="main.js"> </script>
</body>
</html>

main.js
$(document).ready(function(){
    $('#playlist li').click(function(){
        var video = document.getElementById('video');
        var source = document.createElement('source');
        source.setAttribute('src', $(this).attr("movieurl"));
        source.setAttribute('type', $(this).attr("movietype"));
        video.appendChild(source);
    });
});

A:

If you're going to use Jquery, you need to link it, here's the CDN link. 
   <script language="javascript" type="text/javascript"   src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

