swf相关知识
-
OFFICE 文档转换为html在线预览OFFICE 文档转换为html在线预览 OFFICE 文档在线预览方案很多: 服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览,比如flexpaper Office文档直接转换为SWF,通过网页加载Flash预览 微软的Office365 在浏览器中直接打开 转换为html 今天,我们要用的方案是转换为html来预览。 技术方案: office文档转换为pdf:使用libreoffice pdf转html,使用pdf2htmlex 测试环境: 操作系统:ubuntu 12.04 office文档转pdf 1.1 安装libreoffice apt-get install libreoffice-
-
MVC应用程序播放FLV视频,部分视图可多地方重复引用网页上播放Falsh之外,还有一种格式就是FLV的视频,也是最常见的。Insus.NET再想在MVC应用程序实现这功能。实现这个功能,需要从网上下载一个叫vcastr22.swf。如果在网上找不到,可以从下面这个链接下载:http://download.cnblogs.com/insus//MVC/vcastr22.swf 然后放在应用程序下的Scripts目录之下。创建一个model,由于前一次练习中《MVC应用程序播放RealPlayer(rmvb)视频》http://www.cnblogs.com/insus/p/3611497.html 已经创建,就直接用好了,如果在你的应用程序中,没有,也就创建。 考虑到一个站点,不止一个地方有播放Flv视频的,Insus.NET决定创建一个PartialView,有Flv播放的位置,使用这个PartialView即可,部分视图的主要好处就是可多地方重复引用。或许只是其中一些参数奕化。 部分视图写好了
-
MVC应用程序显示Flash(swf)视频本次,Insus.NET想给大家演示另外的方法,MVC与jQuery结合。你无需要下载任何第三方falsh组件。 你需要在MVC应用程序下, 根据上图中的#87代码,我们以Action方法SwfVideoDemo()创建一个视图: #1步,添加一个div markup,将来用加载与显示Falsh视频。#2步,引用jquery的js类库。#3步,执行的是那一个控制器的方法。#4步,把jQuery获取到的html加载至#1步的的div markup。最后,还是实时演示看看效果:
-
JQuery上传插件Uploadify一、限制上传大小、图片尺寸 $('#select').uploadify({ 'swf': '/plugin/uploadify/uploadify.swf', 'uploader': '/work/imageUploadServlet.up', 'formData': { 'operateType':&n
swf相关课程
swf相关教程
- 2. 在网页中添加 FLV 动画 那么接下来要谈的这种 FLV 动画就是蛮重要的一种动画了。 FLV ,是一种叫 Flash Video 视频的简称,我们在 Dreamweaver CC 2018 中会常用到的是一种叫 FLV-swf 的视频。操作步骤也很简单,有多简单呢?下面就跟随老师的脚步来看一看。其实简单来说,在上一个知识点的学习中大家就可以掌握这个这个 FLV 知识点了,因为毕竟它们的操作方式是完完全全相通的。首先,第一步,我们还是新建一个空白的 HTML 文档。第二步,我们还是要在右侧的面板中,选择一个叫 FLASH SWF 的选项。然后在接下来弹出的文件选择界面选择你准备好的视频,因为视频的选择因人而异,素材获取途径也十分广泛,由于版权的原因,老师也不便在这里展示视频播放的内容。但大家在自己练习的过程中可以大胆的选择素材练习。只要不对外发布,是不涉及版权问题的。下图是 FLASH SWF 选项按钮的具体展示。
- 2. 如何防盗链? 前面介绍到,盗链是直接使用正规网站保存图片、视频等的 URL 以获取相应的资源。最简单的防盗想法就是根据客户端请求资源时所携带的一些关键信息来验证请求的合法性,比如客户端 IP、请求 URL 中携带的 referer,如果不合法则直接拒绝请求。此外,由于这些基础信息都可以伪造,因此这样的基础手段也不一定安全。此外,还有登录认证、使用 cookie 等其他防盗连手段。另外,针对特定场景,比如流媒体直播中还有更为高级的防盗手段包括时间戳防盗链、swf 防盗链、回源鉴权防盗链等。
- 3.2 secure_link模块防盗 前面这种简单检查 referer 头部值的防盗链方法过于脆弱,盗用者很容易通过伪造 referer 的值轻而易举跳过防盗措施。在 Nginx 中有一种更为高级的防盗方式,即基于 secure_link 模块,该模块能够检查请求链接的权限以及是否过期,多用于下载服务器防盗链。这个模块默认未编译进 Nginx,需要在源码编译时候使用 --with-secure_link_module 添加。该模块的通过验证 URL 中的哈希值的方式防盗链。它的防盗过程如下:由服务器或者 Nginx 生成安全的加密后的 URL, 返回给客户端;客户端使用安全的 URL 访问 Nginx,获取图片等资源,由 Nginx 的 secure_link 变量判断是否验证通过;secure_link 模块中总共有3个指令,其格式和说明分别如下:Syntax: secure_link expression;Default: —Context: http, server, locationSyntax: secure_link_md5 expression;Default: —Context: http, server, locationSyntax: secure_link_secret word;Default: —Context: location通过配置 secure_link, secure_link_md5 指令,可实现对链接进行权限以及过期检查判断的功能。和 referer 模块中的 $invalid_referer 变量一样,secure_link 模块也是通过内置变量 KaTeX parse error: Expected 'EOF', got '判' at position 14: secure\_link 判̲断验证是否通过。secure_link 的值有如下三种情况:空字符串: 验证不通过0: URL 过期1: 验证通过通常使用这个模块进行 URL 校验,我们需要考虑的是如何生成合法的 URL ?另外,需要在 Nginx 中做怎样的配置才可以校验这个 URL?对于第一个问题,生成合法的 URL 和 指令 secure_link_md5 有关。例如:secure_link_md5 "$secure_link_expires$uri$remote_addr secret";如果 Nginx 中secure_link_md5 是上述配置,那么生成合法 url 的命令如下:# 2020-02-05 21:00:00 转换成时间戳为1580907600echo -n '1580907600/test.png127.0.0.1 secret' | \ openssl md5 -binary | openssl base64 | tr +/ -_ | tr -d =通过上述命令,我们得到了一个 md5 值:cPnjBG9bAZvY_jbPOj13mA,这个非常重要。接下来,构造合的 URL 和指令 secure_link 相关。如果 secure_link 指令的配置如下:secure_link $arg_md5,$arg_expires;那么我们的请求的 url 中必须带上 md5 和 expires 参数,例如:http://180.76.152.113:9008/test.png?md5=cPnjBG9bAZvY_jbPOj13mA&expires=1580907600对于 Nginx 中的校验配置示例如下:location ~* .(gif|jpg|png|swf|flv|mp4)$ { secure_link $arg_md5,$arg_expires; secure_link_md5 "$secure_link_expires$uri$remote_addr secret"; # 空字符串,校验不通过 if ($secure_link = "") { return 403; } # 时间过期 if ($secure_link = "0") { return 410 "URL过期,请重新生成"; } root /root/test;}在 Nginx 的配置中,除了前面提到的 secure_link 和 secure_link_md5 指令外,我们对通过校验和校验失败的情况进行了处理。接下来请看实验部分。
- 3. 视频分片上传 视频分片上传这个会稍微有点复杂,我们页尽量简单做一下,尽量不考虑异常情况,细节等后面大家自己慢慢优化。对于大文件上传,往往采用的方式是将大文件切片,然后分片上传,最后全部分片上传完毕后发送合并请求,将服务器上的分片文件合成最终的文件。这个需求需要前后端一同配合操作,前端有许多线程的组件供我们使用,由于我们用的是纯 html/css/js 开发前端页面,所以直接用 Baidu WebFE(FEX) 团队开发的 WebUploader 来帮助我们完成前端的分片上传工作。对于 Django 的后端上传视频的思路如下:首先确定好一个固定上传根目录 UPLOAD_BASE_DIR (如/root/test/video_website);上传的分片会按照如下命名方式保存到临时目录 (${UPLOAD_BASE_DIR}/tmpfiles/) 下:文件名-块编号-总块数如果是共享文件保存到共享目录 (KaTeX parse error: Expected 'EOF', got '下' at position 28: …_DIR}/shared/) 下̲,私密文件保存到个人的目录 ({UPLOAD_BASE_DIR}/用户名/) 下视频上传的代码主要在 videos 应用下,先看视图代码,如下:# 代码位置:videos/views.pyimport osimport shutilfrom django.shortcuts import render, redirectfrom django.views.generic import Viewfrom django.views.decorators.http import require_http_methodsfrom django.http.response import JsonResponsefrom django.contrib.auth.models import Userfrom videos.models import Videofrom utils.constants import LOGIN_URL, UPLOAD_BASE_DIRTMP_DIR = os.path.join(UPLOAD_BASE_DIR, "tmpfiles")SHARED_DIR = os.path.join(UPLOAD_BASE_DIR, "shared")if not os.path.exists(TMP_DIR): os.makedirs(TMP_DIR)if not os.path.exists(SHARED_DIR): os.makedirs(SHARED_DIR)"""将部分操作加上装饰器,需要登录才能进行操作""" class VideoView(View): """ 视频管理 """ def get(self, request, *args, **kwargs): pass def post(self, request, *args, **kwargs): """ 新增上传视频 """ success = True err_msg = '' name = request.POST.get('name', '') label = request.POST.get('label', '') size = int(request.POST.get('size', '0')) is_private = request.POST.get('is_private', 'false') shared_type = 0 if is_private != 'true' else 1 logined_user = None if request.session.get('has_login', False): logined_user = User.objects.all().get(id=int(request.session['user_id'])) if not logined_user or not isinstance(logined_user, User): return JsonResponse({'success': False, 'err_msg': 'please login in first!'}) print('登录用户:{}'.format(logined_user.username)) if not name: return JsonResponse({'success': False, 'err_msg': 'name is empty!'}) file_path = os.path.join(UPLOAD_BASE_DIR, name) if not os.path.exists(file_path): return JsonResponse({'success': False, 'err_msg': '{} not upload succeeded!'.format(name)}) # 共享视频放到 share 目录下,其余放到各自用户下 old_path = os.path.join(UPLOAD_BASE_DIR, name) if not shared_type: new_dir = SHARED_DIR path = "/shared" else: # 私密视频,放到个人目录下 username = logined_user.username new_dir = os.path.join(UPLOAD_BASE_DIR, username) path = "/{}".format(username) if not os.path.isdir(new_dir): os.makedirs(new_dir) print('移动文件{}到目录{}下'.format(old_path, new_dir)) shutil.move(old_path, new_dir) video_upload = Video(name=name, label=label, size=size, shared_type=shared_type, path=path) video_upload.author = logined_user try: video_upload.save() except Exception as e: success = False err_msg = 'error: {}'.format(str(e)) return JsonResponse({'success': success, 'err_msg': err_msg}) def put(self, request, *args, **kwargs): pass def delete(self, request, *args, **kwargs): passdef video_upload(request, *args, **kwargs): """ 分片上传视频 """ if request.method == 'POST': # 异常考虑 name = request.POST.get("name") chunk_id = request.POST.get("chunk", "0") chunks = request.POST.get("chunks", "0") file_name = "%s-%s-%s" % (name, chunk_id, chunks) video_file = request.FILES.get("file") with open(os.path.join(TMP_DIR, file_name), 'wb') as f: for chunk in video_file.chunks(): f.write(chunk) return JsonResponse({'upload_part': True}) return render(request, "video_upload.html", {})@require_http_methods(["POST"])def merge_chunks(request, *args, **kwargs): """ 合并上传视频 """ file_name = request.POST.get("name") chunks = int(request.POST.get("chunks", "0")) # 完成的文件的地址为 path = os.path.join(UPLOAD_BASE_DIR, file_name) with open(path, 'wb') as fp: for chunk in range(chunks): try: name = os.path.join(TMP_DIR, '{}-{}-{}'.format(file_name, chunk, chunks)) with open(name, 'rb') as f: fp.write(f.read()) # 当图片写入完成后,分片就没有意义了,删除 os.remove(name) except Exception as e: print('异常:{}'.format(str(e))) break return JsonResponse({'merge':True, 'file_name': file_name})代码的逻辑是比较清楚的,主要的完成了如下几个功能:分片视频上传 (video_upload);合并分片视频 (merge_chunks);上传视频信息入库 (VideoView.post);接着是 URLConf 的配置,代码如下:# 代码位置:videos/urls.pyfrom django.urls import pathfrom videos import viewsurlpatterns = [ # 视频的管理 path('op/', views.VideoView.as_view(), name="video_operation"), # 视频上传 path('upload/', views.video_upload, name="upload"), path('video_merge/', views.merge_chunks, name='merge_chunks'),]最后,看下我们使用 WebUploader 和 Bootstrap 功能完成的一个分片上传页面,内容稍多,需要耐心阅读。首先要先完成视频上传,然后才是添加视频的描述信息并提交。{# 代码位置:template/video_upload.html #}{% load staticfiles %}<!DOCTYPE html><html><head><meta charset="UTF-8"><title>webuploader上传</title><link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"><link rel="stylesheet" type="text/css" href="{% static 'css/webuploader.css' %}"><link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}"><script type="text/javascript" src="{% static 'js/jquery-3.5.0.min.js' %}"></script><script type="text/javascript" src="{% static 'js/webuploader.min.js' %}"></script></head><body><div class="row"> <div class="col-md-6"> <form class="form-horizontal upload-video-container" class="col-sm-6"> {% csrf_token %} <div class="form-group"> <label class="col-sm-4 control-label">视频名称</label> <div class="col-sm-8"> <input type="text" class="form-control" id="video-name" placeholder="视频名称" name="video_name"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label">视频简介</label> <div class="col-sm-8"> <textarea class="form-control" rows="5" name="video_label"></textarea> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-4 control-label">上传视频</label> <div class="col-sm-8"> <div id="picker">点击这里选择视频</div> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-8"> <div class="checkbox"> <label style="font-size:14px"> <input type="checkbox" name="is_private"> 设为私密 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-8"> <button id="form-submit" class="btn btn-primary" type = "button">提交</button> </div> </div> </form> </div> <div id="uploader" class="col-md-5 upload-video-container"> <!--用来存放文件信息--> <div id="thelist" class="row"> <div class="panel panel-primary"> <div class="panel-heading">视频文件上传</div> <table class="table table-striped table-bordered" id="uploadTable"> <thead style="text-align: center;"> <tr> <th>文件名称</th> <th>文件大小</th> <th>上传进度</th> <th style="width:15%;">状态</th> </tr> </thead> <tbody> </tbody> </table> <div class="panel-footer"> <button id="upload-btn" class="btn btn-primary">开始上传</button> </div> </div> </div> </div></div></body><script type="text/javascript"> success = false current_upload_file = '' $('#form-submit').on('click', function(){ if (current_upload_file !== null && current_upload_file !== undefined && current_upload_file !== '' && success){ csrf_token = $("input[name='csrfmiddlewaretoken']").val() name = $("input[name='video_name']").val() label = $("textarea").val() is_private = $("input[name='is_private']").is(':checked') $.ajax({ type: "POST", url: "{% url 'video_operation'%}", data: { csrfmiddlewaretoken: csrf_token, name: name, label: label, size: current_upload_file.size, is_private: is_private }, success : function(response) { console.log(response) if (response.success) { alert('提交视频记录完成') } else { alert(response.err_msg) } } }); } else { alert('请先上传完成文件') return 0 } }) function formatSizeUnits(bytes){ if (bytes >= 1073741824) { bytes = (bytes / 1073741824).toFixed(2) + " GB"; } else if (bytes >= 1048576) { bytes = (bytes / 1048576).toFixed(2) + " MB"; } else if (bytes >= 1024) { bytes = (bytes / 1024).toFixed(2) + " KB"; } else if (bytes > 1) { bytes = bytes + " bytes"; } else if (bytes == 1) { bytes = bytes + " byte"; } else { bytes = "0 bytes"; } return bytes; } var uploader = WebUploader.create({ // swf文件路径 swf : 'https://cdnjs.cloudflare.com/ajax/libs/webuploader/0.1.1/Uploader.swf', // 文件接收服务端。 server : "{% url 'upload' %}", // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick : { id : '#picker',//这个id是你要点击上传文件的id multiple : false }, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize : true, auto : false, //开启分片上传 chunked : true, chunkSize : 10 * 1024 * 1024, accept : { extensions : "flv,mp4", mimeTypes : '.flv,.mp4' } }); uploader.on('fileQueued', function(file) { current_upload_file = file // 选中文件时要做的事情,比如在页面中显示选中的文件并添加到文件列表,获取文件的大小,文件类型等 name = file.name size = file.size $('#video-name').val(name) file_upload_html = "<tr><td>" + name + "</td><td>" + formatSizeUnits(size) + "</td><td>0%</td><td><a>准备上传</a></td>" $('#uploader table tbody').html(file_upload_html) $("#upload-btn").removeAttr("disabled") }); uploader.on('uploadBeforeSend',function (object, data, header){ data['csrfmiddlewaretoken'] = $("input[name='csrfmiddlewaretoken']").val() }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function(file, percentage) { $('#thelist').find('tbody').find('tr:eq(0)').find("td:eq(3)").text('上传中') $('#thelist').find('tbody').find('tr:eq(0)').find("td:eq(2)").text((percentage * 100).toFixed(2) + '%') }); uploader.on('uploadSuccess', function(file) { console.log('上传成功') }); uploader.on('uploadError', function(file) { $('#thelist').find('tbody').find('tr:eq(0)').find("td:eq(2)").text('上传失败') }); uploader.on('uploadComplete', function(file) { $('#thelist').find('tbody').find('tr:eq(0)').find("td:eq(3)").text('合并文件中...') csrf_token = $("input[name='csrfmiddlewaretoken']").val() $.ajax({ type: "POST", url: "{% url 'merge_chunks'%}", data: { csrfmiddlewaretoken: csrf_token, name: file.name, chunks: parseInt((file.size + uploader.options.chunkSize - 1) / uploader.options.chunkSize) }, success : function(response) { success = true uploader.removeFile(file); $('#thelist').find('tbody').find('tr:eq(0)').find("td:eq(3)").text('上传完成') $("#upload-btn").attr("disabled", "disabled") } }); }); uploader.on('all', function(type) { console.log('all, type=' + type) }); $('#upload-btn').on('click', function(){ uploader.upload(); }); </script></html>注意:这里的前端代码有许多细节没有考虑,比如错误情况,以及实现暂停上传和查询已上传分片等功能,后续读者可以自行优化。这里的前端代码参考了官方文档和一些 CSDN 博客介绍,用比较简单的方式去完成这个分片上传。主要是上传组件监听的事件以及 jquery 的使用。这里细节不在深究,我们直接看演示的效果。插入视频 35-2
- WebSocket&redis入门 一句话介绍
- 10.4【理解】Status Code 的重要性 React17 系统精讲 结合TS打造旅游电商
swf相关搜索
-
s line
safari浏览器
samba
SAMP
samplerate
sandbox
sanitize
saper
sas
sass
save
smarty模板
smil
smtp
snapshot
snd
snmptrap
soap
soapclient
soap协议