html文件中flash格式（flv、swf）文件的嵌入

2024-06-09 15:08
文章标签 html 格式 frontend flash 嵌入 flv swf

本文主要是介绍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。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
使用C++将处理后的信号保存为PNG和TIFF格式

使用C++将处理后的信号保存为PNG和TIFF格式

《使用C++将处理后的信号保存为PNG和TIFF格式》在信号处理领域,我们常常需要将处理结果以图像的形式保存下来,方便后续分析和展示,C++提供了多种库来处理图像数据,本文将介绍如何使用stb_ima... 目录1. PNG格式保存使用stb_imagephp_write库1.1 安装和包含库1.2 代码解
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...
vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2