qq_34571911
qq_34571911
采纳率58.3%
2019-06-01 14:00

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

160
已采纳

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • mx472756841 战渣渣 2年前

    看代码

    <!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>
    点赞 评论 复制链接分享
提交

为你推荐