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

为你推荐