qq_34571911 2019-06-01 14:00 采纳率: 80%
浏览 1389
已采纳

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>
  • 写回答

1条回答 默认 最新

  • 战渣渣 2019-06-01 14:39
    关注

    看代码

    <!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥15 绘制多分类任务的roc曲线时只画出了一类的roc，其它的auc显示为nan
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗？
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候，驱动要重新装才能使用，怎么解决？