『壹』 javascript html5視頻播放器
款很棒的 HTML5 視頻播放器作為下一代的網頁語言,HTML5 擁有很多讓人期待已久的新特性,其中之一就是 video 標簽,讓開發者可以在網頁中和添加圖片一樣簡單的方式添加視頻。1、VideojsVideoJS 是最流行的 HTML5 視頻播放器,免費、開源,可使用 CSS 輕松定製皮膚,支持全屏,在不支持的瀏覽器自動切換為 Flash 播放。2、SublimeVideoSublimeVideo 是一個獨特的基於雲概念的 HTML5 視頻播放器,功能強大,可惜不是免費的。3、Open Standard Media (OSM) Player由 Alethia Inc 開發,是集全功能於一體的網路播放器,非常不錯。4、Video for EverybodyVideo for Everybody 讓你在網頁中嵌入一小段代碼就能支持 HTML5 視頻,在不支持的瀏覽器中自動切換為 Flash 播放。5、Kaltura HTML5Kaltura 的 HTML5 視頻解決方案 – 兼容所有主流瀏覽器,採用獨特的 fallback 機制。6、FlareVideoFlareVideo 由 Alex MacCaw 開發,他是一位Ruby/JS開發者,FlareVideo主要特色:在不支持 HTML5 視頻的情況,用Flash作為替代方案可輕松自定義主題支持全屏完全開源和免費用於商業用途7、Projekktor全文
『貳』 如何在網頁中插入swf
1. object + embed 傳統的方法
優點:瀏覽器兼容性芹鬧芹好,是 Macromedia 一直以來的官方方法
缺點:
a.embed 標簽是不符合 W3C 的規范的,無法通過驗證。當然,如果你不在乎什麼規范不規范,另當別論。
b.微軟由於種種原因,在 sp2 後限制了 IE 的 ActiveX 的使用模式,就是在頁面中的 ActiveX 有一個虛框,需要用戶點擊一次才能正常交互。Flash是作為一個 ActiveX 嵌入到網頁中的,所以它也會嫌畢受牽連,只有通過 JS 嵌入 Flash 才能解決這個問題。
c.沒有 Flash 版本檢測,如果版本瀏覽器的flash插件版本不夠,或者不能正常顯示你的 swf 文件,或者會彈出一個 ActiveX 的確認安裝的框。
<object id="forfun" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="300"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">
<param name="movie" value="/seufld/seufld/flash/focus2.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#F0F0F0">
<param name="menu" value="false">
<param name="wmode" value="opaque"><!--Window|Opaque|Transparent-->
<param name="FlashVars" value="">
<param name="allowScriptAccess" value="sameDomain">
<embed id="forfunex" src="/seufld/seufld/flash/focus2.swf"
width="400"
height="300"
align="middle"
quality="high"
bgcolor="#f0fff8"
menu="false"<!--添加後,ff下才正常-->
play="true"
loop="false"
FlashVars=""
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
2. 單object
這種方法的名字叫做 Flash satay,最早是2002年由 Drew McLellan 發表在 A List Apart 上,後來又經過了幾次完善:
<object type="application/x-shockwave-flash" data="c.swf?path=movie.swf"
width="400" height="300">
<param name="movie" value="c.swf?path=movie.swf" />
<img src="http://xuguang2003.blog.163.com/blog/noflash.gif" width="200" height="100" alt="" />彎胡
</object>
優點:這方法沒有embed,可以通過驗證,瀏覽器兼容性也不錯
缺點:
a.需要一個 holder swf 來載入你的目標 swf 以保證 IE 中的 stream 能力,如果你需要通過 flashvars 來傳參,或者和頁面的 JS 交互,會很麻煩。
b.ActiveX的虛框問題。
c.沒有版本檢測。
d.還是有少數用戶代理(比如一些版本的 safari 和一些屏幕閱讀器)不認這種方式,有 bug。
3. 雙object
<object id="exercises" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="214" height="144">
<param name="movie" value="${contextPath}/flex/photo.swf" />
<param name="wmode" value="window" />
<param name="flashvars" value=""/>
<!--[if !IE]><!-->
<object id="exercisesEx" type="application/x-shockwave-flash"
data="${contextPath}/flex/photo.swf" width="214" height="144">
<param name="flashvars" value=""/>
<!--<![endif]-->
<!--[if gte IE 6]>
<![endif]-->
<!--[if !IE]><!-->
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]><!-->
</object>
<!--<![endif]-->
</object>
4. flex提供的標准方法
<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="http://xuguang2003.blog.163.com/blog/history/history.css" />
<!-- END Browser History required section -->
<script src="http://xuguang2003.blog.163.com/blog/AC_OETags.js" language="javascript"></script>
<!-- BEGIN Browser History required section -->
<script src="http://xuguang2003.blog.163.com/blog/history/history.js" language="javascript"></script>
<!-- END Browser History required section -->
<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 60;
// -----------------------------------------------------------------------------
// -->
</script>
</head>
<body scroll="no">
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Proct Install (6.0r65)
var hasProctInstall = DetectFlashVer(6, 0, 65);
// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if ( hasProctInstall && !hasRequestedVersion ) {
// DO NOT MODIFY THE FOLLOWING FOUR LINES
// Location visited after installation is complete if installation is required
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
var MMdoctitle = document.title;
AC_FL_RunContent(
"src", "playerProctInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "ManagePlatform",
"quality", "high",
"bgcolor", "#869ca7",
"name", "ManagePlatform",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "ManagePlatform",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "ManagePlatform",
"quality", "high",
"bgcolor", "#869ca7",
"name", "ManagePlatform",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="ManagePlatform" width="100%" height="100%"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="ManagePlatform.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="http://xuguang2003.blog.163.com/blog/ManagePlatform.swf" quality="high" bgcolor="#869ca7"
width="100%" height="100%" name="ManagePlatform" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
</noscript>
5. swfobject
http://code.google.com/p/swfobject/
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject 2 dynamic publishing example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div id="myContent">
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
6. 單embed顯示 ie7和ff3下都能正常顯示
<embed allowscriptaccess="never" allownetworking="internal" invokeurls="false" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" quality="high" autostart="0" wmode="transparent" width="100%"
height="300" align="middle">
在做web開發中可能會遇到flash遮擋頁面中元素的情況,無論怎麼設置flash容器和層的深度(z-index)也無濟於事,現有的解決方案是在插入flash的embed或object標簽中加入」wmode」屬性並設置為wmode=「transparent」或」opaque」,但wmode屬性到底是什麼意義,為什麼可以解決這個問題呢?window mode(wmode)wmode即窗口模式總共有三種,看看當年Macromedia官方的說法:Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don』t need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.window 模式默認情況下的顯示模式,在這種模式下flash player有自己的窗口句柄,這就意味著flash影片是存在於Windows中的一個顯示實例,並且是在瀏覽器核心顯示窗口之上的,所以flash只是貌似顯示在瀏覽器中,但這也是flash最快最有效率的渲染模式。由於他是獨立於瀏覽器的HTML渲染表面,這就導致默認顯示方式下flash總是會遮住位置與他重合的所有DHTML層。但是大多數蘋果電腦瀏覽器會允許DHTML層顯示在flash之上,但當flash影片播放時會出現比較詭異的現象,比如DHTML層像被flash刮掉一塊一樣顯示異常。Opaque 模式這是一種無窗口模式,在這種情況下flash player沒有自己的窗口句柄,這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪制的時間和位置。這時flash影片就不會在高於瀏覽器HTML渲染表面而是與其他元素一樣在同一個頁面上,因此你就可以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋。Transparent 模式透明模式,在這種模式下flash player會將stage的背景色alpha值將為0並且只會繪制stage上真實可見的對象,同樣你也可以使用z-index來控制flash影片的深度值,但是與Opaque模式不同的是這樣做會降低flash影片的回放效果,而且在9.0.115之前的flash player版本設置wmode=」opaque」或」transparent」會導致全屏模式失效。了解了各種模式的實現方式和意義在以後的開發中就可以按照具體情況選擇設置wmode屬性的值了。
『叄』 JS怎麼控制網頁視頻(SWF格式)的暫停和播放啊
JS直接使用 JavaScript 來操作即可,需要用原生的JavaScript代碼來控制。
舉例(例如頁面上有1個專video):
<video id="myVideo" src="1.webm" controls />
則對應的腳本代屬碼為:
/* JS代碼 */
document.getElementById('myVideo').play(); // 播放
document.getElementById('myVideo').pause(); // 暫停
/* jQuery代碼 */
$('#myVideo').play(); // 播放
$('#myVideo').pause(); // 暫停
『肆』 asp下用js flash播放swf畫面大小的問題
我一般都是在上傳時設定好文件對應尺寸大小的。你是不是沒有旦穗舉用FLV格式?用FLV格式,然後上傳時設定好視頻大小,他會自動進行拓展或收縮。還不明白的可以族頃繼續給我模碧留言。
『伍』 想用怎麼用js實現播放音頻。
1、播放音樂需要區分瀏覽器,來使用不用的對象來播放音樂
2、在播放控制上要有【播放】和【停止】來控制音樂的播放
基於以上思路,代碼如下:
<SCRIPTtype="text/javascript">
if(-1!=navigator.userAgent.indexOf("MSIE"))
{
//不是微軟IE瀏覽器,則調用Flash來播放音樂
document.write('<OBJECTid="Player"');
document.write('classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"');
document.write('width=0height=0><paramname="URL"value="a.mp3"/><paramname="AutoStart"value="false"/></OBJECT>');
}
else
{
//是微軟IE瀏覽器,則調用微軟的Player對象來直接播放音樂
document.write('<OBJECTid="Player"');
document.write('type="application/x-ms-wmp"');
document.write('autostart="false"src="a.mp3"width=0height=0></OBJECT>');
}
</SCRIPT>
<inputtype=buttonvalue="播放"onclick="Player.controls.play();"/>
<inputtype=buttonvalue="停止"onclick="Player.controls.stop();"/>
『陸』 網頁調用swf圖片播放器文件,怎麼設置為『手動』切換圖片
這個需要有swf文件的源文件了,除非這個swf文件里有預留介面可能用js與as通信完成手動和自動的切換,否則就要改源文件才可以達到你要的效果。
一般手機上是無法看到swf文件的,建議可以使用js實現相同的圖片切換效果。
目前FLASH製作的內容除了動畫其它需要代碼開發的交互功能大都用在觸摸屏等特定設備了。
『柒』 我想知道 JS 如何獲得SWF當前播放的時長 或者說如何通過JS控制SWF的動作
一半播放器都有屬性吧。
WMP載入媒體後也應該相關的屬性。
『捌』 用js控制swf的播放
輕松搞定
需要用到JS與AS通信
AS中注冊JS需要用到的函數,然後再JS中就像調用JS本身函數一樣簡單了回 可以傳參數 這方面資答料你可以去網上搜一下 或者我簡單和你說一下
在AS中 使用 ExternalInterface.addCallback("funName1", funName2); 頭文件引入import flash.external.ExternalInterface;
funName1是JS調用AS函數funName2時用的函數名
貌似不要AS調用JS函數這樣初始化的時候省很多事情
AS控制音頻你該會吧? 這樣你就可以用JS就像用AS一樣控制了
『玖』 網頁音樂播放器,有SWF和JS文件 求高人指點如何調用和導入
用框架吧,或者嵌入到你的網頁中。
『拾』 swf播放器如何接受url或js給的參數來選擇播放那個影片
幫你頂一下吧,希望有人幫助你!