html文件中flash格式(flv、swf)文件的嵌入

2024-06-09 15:08

本文主要是介绍html文件中flash格式(flv、swf)文件的嵌入,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

flash文件的格式:.FLV 和 .SWF

flash视频格式有两种扩展名可以使用:.flv和.swf。他们有什么不同呢?

(1)一个.flv文件(flash视频)是基于图片的视频流和音频。如果你在运行一个流服务,flv将是一个好的选择。上游条件是,这个文件的任何部分可以被客户终端访问,并且任何时间不会等待下载。话又说回来了,运行一个流服务待价昂贵。

(2).swf也是Macromedia Flash文件格式,是一个完整的视频-音频文件,并具有脚本和其它更多的。这将有利于HTTP(渐进式)下载,也被叫做“伪随机流(psuedo streaming)”。当文件的一部分下载后,视频片段就立刻播放,但是客户端将等待flash文件片段下载后才能访问(不能快进),除非整个文件完整下载。这也是我们常常谈到的,他是一个简单的,不昂贵的,简便的方式流话你的视频媒介。SWF不是官方简称,已经有人声称它是“ShockWave Flash”或者"Small Web Format".的简称。

(根据http://www.free-video-hosting.net/streaming-flash.php 片段翻译)。

在页面中嵌入flash可以使用如下方式:

    

[html] view plain copy print ?
  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"   
  2. codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0"   
  3. width="320" height="400" >  
  4. <param name="movie" value="video-filename.swf">  
  5. <param name="quality" value="high">  
  6. <param name="play" value="true">  
  7. <param name="LOOP" value="false">  
  8. <embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"   
  9. type="application/x-shockwave-flash">  
  10. </embed>  
  11. </object>   


这里要注意的是: <param name="movie" value="video-filename.swf">和<embed src="video-filename.swf".....  这两个地方,都是swf文件的位置名称,其他一些参数可以参考以上链接里的介绍。

     但是这样写了之后,虽然页面中swf格式的文件可以显示,但是flv格式的文件播放不了。纠结了一阵子,从dreamweaver中总结了一个解决方案:

[html] view plain copy print ?
  1. <script type="text/javascript">  
  2. function MM_CheckFlashVersion(reqVerStr,msg){  
  3.   with(navigator){  
  4.     var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);  
  5.     var isWin = (appVersion.toLowerCase().indexOf("win") != -1);  
  6.     if (!isIE || !isWin){    
  7.       var flashVer = -1;  
  8.       if (plugins && plugins.length > 0){  
  9.         var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";  
  10.         desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;  
  11.         if (desc == "") flashVer = -1;  
  12.         else{  
  13.           var descArr = desc.split(" ");  
  14.           var tempArrMajor = descArr[2].split(".");  
  15.           var verMajor = tempArrMajor[0];  
  16.           var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");  
  17.           var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;  
  18.           flashVer =  parseFloat(verMajor + "." + verMinor);  
  19.         }  
  20.       }  
  21.       // WebTV has Flash Player 4 or lower -- too low for video  
  22.       else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;  
  23.   
  24.       var verArr = reqVerStr.split(",");  
  25.       var reqVer = parseFloat(verArr[0] + "." + verArr[2]);  
  26.     
  27.       if (flashVer < reqVer){  
  28.         if (confirm(msg))  
  29.           window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";  
  30.       }  
  31.     }  
  32.   }   
  33. }  
  34. </script>  
  35. </head>  
  36.   
  37. <body onload="MM_CheckFlashVersion('7,0,0,0','本页内容需要使用较新的 Macromedia Flash Player 版本。是否现在下载它?');">  
  38. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="314" height="234" id="FLVPlayer">  
  39.   <param name="movie" value="FLVPlayer_Progressive.swf" />  
  40.   <param name="salign" value="lt" />  
  41.   <param name="quality" value="high" />  
  42.   <param name="scale" value="noscale" />  
  43.   <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=%E8%80%81%E5%A4%A9%E4%B8%8B%E8%B4%B0%E4%B9%8B%E8%8E%AB%E9%97%AE%E4%BB%8A%E6%9C%9D&autoPlay=true&autoRewind=true" />  
  44.   <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=%E8%80%81%E5%A4%A9%E4%B8%8B%E8%B4%B0%E4%B9%8B%E8%8E%AB%E9%97%AE%E4%BB%8A%E6%9C%9D&autoPlay=true&autoRewind=true" quality="high" scale="noscale" width="314" height="234" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />  
  45. </object>  


这里多了一个版本控制的方法MM_CheckFlashVersion()。

下部分和swf的写法很相似,但是还略有不同。<param name="movie" value="FLVPlayer_Progressive.swf" 这里不再是播放文件了,而是相当于一个播放器性质的文件,而且使用dreamweaver插入一个flash文件后,你会发现FLVPlayer_Progressive.swf这个文件和Clear_Skin_3.swf。前者相当于播放器,后者相当于皮肤,dreamweaver里面提供了多种皮肤,可以根据选择使用。在以上代码中有两处使用到了播放器文件FLVPlayer_Progressive.swf,这个和swf的很相似,但是他不是源文件。代码中skinName就是设置皮肤的,其他的一些属性都比较好理解。

     总结一下,flv格式嵌入有3个要点:1,播放器FLVPlayer_Progressive.swf,这个文件必不可少,而且这个文件要和flv源文件在一个文件目录下(暂时也没有找到原因)2.皮肤skinName=Clear_Skin_3,皮肤可以更换,同样也是必不可少的,要和flv源文件在一起。3.源文件,streamName,这个参数显示源文件的文件名,不带后缀,当文件名为中文的时候,dreamweaver会知道把那个名称转换为一大串。。。。当html文件和flv文件不在同一个文件目录下面的时候,需要带上文件路径(这个在项目中要特别注意)。

图示中同一个页面使用了两种皮肤,一个设为自动播放,另一个为手动播放。文件格式为flv。

这篇关于html文件中flash格式(flv、swf)文件的嵌入的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1045521

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd