javascript采用Broadway实现安卓视频自动播放的方法(这种坑比较多 不建议使用)

javascript采用Broadway实现安卓视频自动播放的方法
Broadway 是一个 H.264 解码器, 比jsmpge清晰度要高 使用 Emscripten 工具从 Android 的 H.264 解码器转化而成,它还针对 WebGL 做了一些优化。

1 先把mp4要转下 ffmpeg -i in.mp4 -s 500×804 -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 out.mp4
2 代码如下

<html>
<head>
  <link type="text/css" href="screen.css" rel="stylesheet" />
</head>
<body onload="load()">
  <script src="/moban/js/jquery.min.js"></script>
  <script type="text/javascript" src="Decoder.js"></script>
  <script type="text/javascript" src="YUVCanvas.js"></script>
  <script type="text/javascript" src="Player.js"></script>
  
  <script type="text/javascript" src="stream.js"></script>
  
  <script type="text/javascript" src="mp4.js"></script>
  
  <script type="text/javascript">
    function load() {
    var broadwaynode=$('.broadway')[0];
    var broadway = new Broadway(broadwaynode);
    broadway.play();
    }
  </script>
  

  <div class="broadway" src="mozilla_story.mp4" width="640" height="360" style="float: left; position: relative;" workers="false" render="true" webgl="auto"></div>
</body>
</html>
// 用绝对定位是为了挡住下面的调试信息
canvas{
       width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 101;
}


  var broadwaynode=$('.broadway')[0];
    var broadway = new Broadway(broadwaynode);
    broadway.play();

3 官网资料 https://github.com/mbebenita/Broadway

ps:Unrecognized option ‘wpredp’这个错误 说明 ffmpge不完整 建议用win版本

javascript监听手机返回键

javascript监听手机返回键

    if (window.history && window.history.pushState) {
        $(window).on('popstate', function() {
            var hashLocation = location.hash;
            var hashSplit = hashLocation.split("#!/");
            var hashName = hashSplit[1];
            if (hashName !== '') {
                var hash = window.location.hash;
                if (hash === '') {
                    $('.tcclose').css('display', 'none');
                    return false;
                }
            }
        });
        window.history.pushState('forward', null);
    }

javascript canvas 生成图片的方法

javascript canvas 生成图片的方法

先生成base64格式的图片 然后ajax传到后台 写入服务器文件夹即可

<!DOCTYPE HTML>
<html>

<body>
    <canvas id="myCanvas">
        your browser does not support the canvas tag
    </canvas>
    <script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, 0, 80, 100);

    var data = getBase64Image();
    console.log(data);

    function getBase64Image() {
        var canvas = document.getElementById('myCanvas');
        var dataURL = canvas.toDataURL("image/png");
        return dataURL
        // return dataURL.replace("data:image/png;base64,", "");
    }
    </script>
</body>

</html>

javascript获取上传图片的大小

javascript获取上传图片的大小

<input id="file" type="file">  
<input id="Button1" type="button" value="button" onclick="check()">  
<script>  
window.check=function(){  
var input = document.getElementById("file");  
if(input.files){  
                //读取图片数据  
  var f = input.files[0];  
  var reader = new FileReader();  
  reader.onload = function (e) {  
      var data = e.target.result;  
      //加载图片获取图片真实宽度和高度  
      var image = new Image();  
      image.onload=function(){  
          var width = image.width;  
          var height = image.height;  
          alert(width+'======'+height+"====="+f.size);  
      };  
      image.src= data;  
  };  
      reader.readAsDataURL(f);  
  }else{  
      var image = new Image();   
      image.onload =function(){  
          var width = image.width;  
          var height = image.height;  
          var fileSize = image.fileSize;  
          alert(width+'======'+height+"====="+fileSize);  
      }  
      image.src = input.value;  
  }  
}  
</script>  

javascript iframe跳转问题

javascript iframe跳转问题
如果在iframe里面有要点击跳转最外层的连接 要只能用

  <div onclick="parent.location.href='/home/fwef/wef.html'" class="bianjibtn">编辑</div>

用a标签实现 iframe 的链接跳转

<!DOCTYPE html>
<html>
<body>

<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>

<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

<p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>

</body>
</html>

另外说下 iframe之间session和cookie不能共享 所以只能用url后缀来判断了

javascript高德地图放到网页中的方法

javascript高德地图放到网页中的方法

1 先获取到经纬度
http://lbs.amap.com/console/show/picker

2 下面代码直接设置下中心点 和标记点就可以了

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点标记</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .marker {
            color: #ff6600;
            padding: 4px 10px;
            border: 1px solid #fff;
            white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #0066ff;
        }
    </style>
    <script src="http://webapi.amap.com/maps?v=1.3&key=输入key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>

<script>
    var marker, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [123.17699, 33.21674],
        zoom: 16
    });
    marker = new AMap.Marker({
        icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [123.17699, 33.21674]
    });
    marker.setMap(map);

</script>
</body>
</html>