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

相关文章

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

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各