zoukankan      html  css  js  c++  java
  • 播放视频

    
    
    <li onclick="showVideo(1)"><label>第1讲</label>怎样记住新知识?</li>
    
    
    
    <div class="video">
          <video x5-video-player-type="h5-page" x5-video-player-fullscreen="true" controls
              poster="" src="" x5-video-orientation="landscape|portrait"></video>
              <span class="closevideo">关闭</span>
        </div>
    // 播放视频
        function showVideo (num) {
         
          $('.video').show();
          $('video').attr('poster', './images/school/banenr_poetry.png') // 加载时图片
          $('video').attr('src', `./video/jiyifa_0${num}.mp4`) // 视频位置
        }
    $('.closevideo').click(() => {
          $('.video').hide();
        })
    .video {
      display: none;
      position: fixed;
      top:3rem;
      left:0;
      z-index: 100;
      background: #000;
    }
    /*视频播放*/
    .video video {
      position: relative;
      width: 100%;
      height: auto; 
    }
    .closevideo {
      position: absolute;
      bottom: .2rem;
      left: .2rem;
      display: inline-block;
      font-size: .24rem;
      color: #fff;  
    }
  • 相关阅读:
    python re模块
    python
    python
    Django学习手册
    Django学习手册
    前端
    前端
    Django学习手册
    前端
    Database学习
  • 原文地址:https://www.cnblogs.com/gongxiaoyan/p/13576302.html
Copyright © 2011-2022 走看看