当前位置:   article > 正文

video标签-点击视频屏幕 播放视频,显示进度条_标签语言视频进度条代码

标签语言视频进度条代码

实现效果:

  1. 根据指定时间使用不同效果
  2. 点击video封面图片 播放视频
  3. 视频播放时显示进度条
    示例代码:
<div>
    @if(time() - strtotime('2016-11-17 15:30:00') < 0)
    <video src="/cdsassets/upload/video/20161117.mp4"  x-webkit-airplay="true" webkit-playsinline="true"  width="100%" poster="/cdsassets/assets/images/web/video.png" preload="auto"  id="videoPlay1" ></video>
    @else
    <video style="width:100%;" poster="/cdsassets/assets/images/web/video.png" onclick="returnLive('{{get_cookie('nickName')}}')"></video>
    @endif
</div>
<script type="text/javascript">   
    var video1=document.getElementById("videoPlay1");
    video1.onclick=function(){
        video1.controls=true;
        if(video1.paused){
            video1.play();
        }else{
            video1.pause();
        }
    }

</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

知识点:

  1. preload 是否预加载视频
  2. webkit-playsinline 支持内联播放
  3. x-webkit-airplay
  4. paused 视屏是否暂停
  5. pause() 暂停播放视频
  6. controls 显示视频进度条
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/130275
推荐阅读
相关标签
  

闽ICP备14008679号