zoukankan      html  css  js  c++  java
  • 点击图片播放视频

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>点击图片播放视频</title>
    <link rel="stylesheet" href="css/style.css">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
    <style>
    body{background:#000;}
    html{font-size:100px;font-family:"微软雅黑"}
    img{100%;vertical-align: middle}
    .videobtn,.videocont{6rem;margin:0.5rem 0 0 0.75rem;}
    .btn{5rem;height:0.9rem;text-align:center;line-height:0.9rem;font-size:0.3rem;border-radius:1rem;background:#E49E3F;color:#fff; margin: 1.25rem 0 1rem 1.25rem;}
    .videocont{display:none;}
    video{100%;}
    </style>
    </head>
    <body>
    <img class="bg" src="images/dumu.png" alt="">
    <img class="videobtn" src="images/videobg.png" alt="">
    <div class="videocont">
    <video class="video" controls="controls" src="https://api.cnlive.com/open/api2/vod_ips/vodplayByH5?appId=117_itdq3xbv08&vId=ced9f948a2524776911037044064cef6&isHLS=0"></video>
    </div>
    <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.cnlive.goldenline"><div class="btn">观看整片</div></a>
    <script src="js/jquery.min.js"></script>
    <script src="js/resize.js"></script>
    <script>
    $('.videobtn').click(function(){
    $(this).hide();
    $('.videocont').show();
    var Video = document.getElementsByClassName('video')[0];
    Video.play();
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    RMQ的ST算法
    sublime text 3设置
    CodeForces 349B--Color the Fence(贪心)
    HDU 2859—Phalanx(DP)
    一、创建型设计模式
    前端学HTTP之网络基础
    前端工程师技能之photoshop巧用系列第五篇——雪碧图
    javascript基础语法——变量和标识符
    深入学习jQuery动画控制
    你不知道的This和Class
  • 原文地址:https://www.cnblogs.com/studyh5/p/8310679.html
Copyright © 2011-2022 走看看