使用Chrome播放本地SWF文件

Vanabel/ 10月 7, 2018/ 互联网/ 0 comments

两个版本, 一个是选择文件, 一个是直接拖拽。 当然也有合并到一起的办法, 参考这里。直接将下列文件放到和flash同一目录然后用浏览器打开并将swf上传或者拖拽到改网页即可。

点击上传版

<!DOCTYPE>
<html>
  <head>
    <title>SWF player</title>
  </head>
  <style>
#container{
  display: flex;
  min-height:100%;
  flex-direction:column;
  align-items:stretch;
}
#file {
  padding-bottom: 1em;
  border-bottom: double 6px #ccc;
  margin-bottom: 1em;
}
#file input {
  font-size: 30px;
}
  </style>
  <body>
    <div id="container">
      <div id="file">
        <input type="file" id="swfinput" onchange="showSWF(this.files);">
      </div>
      <div class="swf">
        <object>
          <embed  id="swfobj" src="" width="100%">
        </object>
      </div>
    </div>
  </body>
  <script>
function showSWF(files){
  var numFiles=files.length;
  for (var i=0; i<numFiles; i++){
    var file=files[i];
    //console.log(file.name, file.size, file.type);
    var source=file.name;
    var swfobj=document.getElementById("swfobj");
    var inputh=document.getElementById("file").offsetHeight;
    var containerh=document.getElementById("container").offsetHeight;
    var swfh=containerh-inputh;
    var clone=swfobj.cloneNode(true);
    clone.setAttribute('src', source);
    clone.setAttribute('height', swfh);
    swfobj.parentNode.replaceChild(clone, swfobj);
    //console.log(swfh, containerh);
  }
}
  </script>
</html>

拖拽版

<!DOCTYPE>
<html>
  <head>
    <title>SWF player</title>
  </head>
  <style>
#container{
  display: flex;
  min-height:100%;
  flex-direction:column;
  align-items:stretch;
}
#file {
  padding-bottom: 1em;
  border-bottom: double 6px #ccc;
  margin-bottom: 1em;
  height:45px;
  text-align: center;
  line-height: 45px;
  background: #eef;
  border: dashed 3px #eec;
}
#file input {
  font-size: 30px;
}
  </style>
  <body>
    <div id="container">
      <div id="file">
        Drag file to here...
      </div>
      <div class="swf">
        <object>
          <embed  id="swfobj" src="" width="100%">
        </object>
      </div>
    </div>
  </body>
  <script>
var dropbox;

dropbox = document.getElementById("file");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", showSWF, false);
function dragenter(e){
  e.stopPropagation();
  e.preventDefault();
}
function dragover(e){
  e.stopPropagation();
  e.preventDefault();
}

function showSWF(e){
  e.stopPropagation();
  e.preventDefault();

  var dt=e.dataTransfer;
  var files=dt.files;
  var numFiles=files.length;
  for (var i=0; i<numFiles; i++){
    var file=files[i];
    console.log(file.name, file.size, file.type);
    var source=file.name;
    var swfobj=document.getElementById("swfobj");
    var inputh=document.getElementById("file").offsetHeight;
    var containerh=document.getElementById("container").offsetHeight;
    var swfh=containerh-inputh;
    var clone=swfobj.cloneNode(true);
    clone.setAttribute('src', source);
    clone.setAttribute('height', swfh);
    swfobj.parentNode.replaceChild(clone, swfobj);
    //console.log(swfh, containerh);
  }
}
  </script>
</html>
Share this Post

Leave a Comment

您的电子邮箱地址不会被公开。 必填项已用*标注

*
*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据