html5流体线 视频做法

html5流体线 视频做法

结合settimeout写 切记 一开始settimeout逻辑不要写在$(function(){}) 因为网速不同 这个什么时候加载是不一样的

注意 写成一个个函数 这样以后想看哪个想过可以直接运行函数看到效果 不用从头看了 修改起来也方便 看起来也直观 每个方法都要写注释注释
function aa(){
}

win charles显示中文乱码解决终极方案

win charles显示中文乱码解决终极方案

1 找到Charles.ini
2 然后修改文件 加个vmarg.2=-Dfile.encoding=UTF-8 就可以了
具体如下

working.directory=.
classpath.1=lib/charles.jar
main.class=com.xk72.charles.gui.MainWithClassLoader
vm.version.min=1.4
vm.heapsize.preferred=256M
vmarg.1=-Dsun.java2d.d3d=false
vmarg.2=-Dfile.encoding=UTF-8
dde.enabled=true
dde.class=com.xk72.charles.win32.Win32DDEManager
dde.server.name=Charles
dde.topic=System
single.instance=dde

[ErrorMessages]
java.not.found=A suitable Java installation was not found. Please visit http://www.java.com/ to install Java.
java.failed=The Java installation is broken. Please uninstall and reinstall Java from http://www.java.com/

pinchzoom插件模拟微信客户端点击图片放大(支持触摸滑动放到缩小)

pinchzoom插件模拟微信客户端点击图片放大(支持触摸滑动放到缩小) 代码如下

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>模拟微信客户端点击图片  (支持触摸滑动放大缩小)</title>
    <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
    <style>
     .pinch-zoom,.pinch-zoom img{
    width: 100%;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
}
.pinch-zoom-container{
    height:1400px;
    display: none;
}
    </style>
</head>

<body>

<div class="kandatucontainer pinch-zoom">
    <img class="fangdac"  src="{$yuming}/images/fangdac.png" />
</div>

<script src="/js/pinchzoom.js"></script>
<script type="text/javascript">
    $(function () {
        $('.pinch-zoom').each(function () {
            new RTP.PinchZoom($(this), {});
        });



     //pinch-zoom-containe是最外面的容器 是自动生成的
    $('.fangdacbtn, .p18_wz1').on('click',function () {
        $('.fangdac').parents('.pinch-zoom-container').fadeIn();
      $("body").scrollTop(0)
    })

    $('.fangdac').parents('.pinch-zoom-container').on('click',function () {
        $(this).fadeOut();
    })
    })
</script>

</body>
</html>

这样就可以直接缩放图片了

html5 video播放完切换画面方案

video标签播放视频 移动端不能自动播放 必须点击后才能播放

html5 video播放完切换画面方案
方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery.min.1.8.3.js"></script>
</head>
<style>
    html,body{
        width:100%; height:100%;
    }

</style>
<body>

//播放只能全屏
<video id="video1" style="width:100%; height:100%;object-fit: fill;  display:none" src="http://mobile-show.cn/video/fromYou1.mp4"  webkit-playsinline=""></video>
<script>
      $(function () {
          $('body').bind('click',function () {
              $('#video1').css('display','block');
              $('#video1')[0].play();
          })
            //播放完跳转页面 才能彻底的切换画面
          $('#video1').bind('error ended', function(){
              window.location.href='http://www.baidu.com';
          })
      })
</script>










</body>
</html>

方法二 最靠谱的方法(全屏播放)

<video id="video1" style="overflow: hidden; width: 100%; width: 100%; display: none; " src="/solosea1/mp4/cai.mp4"
       webkit-playsinline="true"  class="video" height="100%" playsinline="true"
       x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>

这个播放完不会弹出广告 播放完直接display:none 当然dom元素也能覆盖 就是不能加背景因为这个只能全屏播放 直接元素盖住他

切记不要加autoplay 加了下面事件会默认为播放处理的 其实他是不会自动播放的。。

demo如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery.min.1.8.3.js"></script>
</head>
<style>
    html, body {
        width: 100%;
        height: 100%;
    }

</style>
<body style="background: #FFF">


<video id="video1" style="overflow: hidden; width: 100%; width: 100%; display: none; " src="/solosea1/mp4/cai.mp4"
       webkit-playsinline="true"  class="video" height="100%" playsinline="true"
       x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>


<script>
    $(function () {

        getvideoprogress();

        $('body').bind('click', function () {
            $('#video1').css('display', 'block');
            $('#video1')[0].play();
        })

        var vid = document.getElementById("video1");
        vid.onended = function () {
            $('#video1').css('display', 'none');
            alert("视频已播放完成");
        };

    })

    function getvideoprogress() {
        setTimeout(function () {
            var vid = document.getElementById("video1");
            var currentTime=vid.currentTime.toFixed(1);
            if(currentTime>=1.2){
                //触发
                return false;
            }
            console.log(currentTime);
            getvideoprogress();
        }, 50);
    }
</script>


</body>
</html>

第三种 这种适用于不是全屏播放有进度条的

  <video  src="{$yuming}/mp4/shipin.mp4"  controls="" x5-playsinline="" playsinline="" webkit-playsinline="" poster="" preload="auto"></video>

他这个可以直接display:none

第四种 最佳方法(解决播放全屏的问题 但是性能差的手机有卡顿)

jquery JSMpeg.js 播放视频解决不用全屏也能播放