video标签点击改变大小并播放

video标签，如何用javascript实现在点击之后把#a1大小变成200px，并自动播放视频。停止播放后把#a1变回100px。

<div id="a1">
<video src="/i/movie.ogg" controls="controls"></video>
</div>

<style>
#a1{float:left;width:100px;height:100px;}
</style>

看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="a1">
    <video src="222.mp4">
    </video>
</div>

<style>
    #a1 {
        float: left;
        width: 100px;
        height: 100px;
    }

    #a1 video {
        width: 100px;
        height: 100px;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var md = document.getElementsByTagName("video")[0];
        $("#a1").on('click', function () {

            if (md.currentTime == 0) {
                // 尚未播放时，改变大小
                $("#a1").css('width', "200px");
                $("#a1").css('height', "200px");
                $("#a1 video").css('width', "200px");
                $("#a1 video").css('height', "200px");
                md.play();
            }
        });
        // 监听播放结束
        md.addEventListener("ended", function () {
            console.log('结束');
            md.currentTime = 0;
            // 恢复#a1大小，恢复video大小
            $("#a1").css('width', "100px");
            $("#a1").css('height', "100px");
            $("#a1 video").css('width', "100px");
            $("#a1 video").css('height', "100px");
        })
    });
</script>
</body>
</html>

video标签 点击改变大小并播放

video标签点击改变大小并播放