公司新闻

苹果播放视频代码

2012-08-15 16:32:05

现在苹果产品应用越来普及，如果让自己网站上的视频也能够在苹果产品上播放？实现方法如下：

以前浏览器不能直接播放视频，所以需要用插件，比如wmp、real player、flash。而wmp、real player不能跨平台、跨浏览器，flash有时候会导致浏览器卡、崩溃。

青岛网站设计与青岛网站制作的HTML网页视频点播方案，想在网页中播放视频？

整理了一个下载包：
网页视频支持苹果系统播放.rar

演示页面：
http://www.leadto.com.cn/uploads/html5/html5.html

现在浏览器集成了播放器，不再需要插件了，直接能放视频，提高了性能、稳定性、跨平台兼容性。在HTML 4、XHTML 1、HTML5的页面中都能播放。

浏览器能播放哪种格式的视频？各个浏览器不同，有专利格式的，有开源格式的。

具体支持情况如下：

专利格式mp4：Safari（Ipad、Windows、Mac OS）、Chrome、IE9

开源格式webm：Firefox、Chrome、Opera

开源格式ogg：Firefox、Chrome、Opera

如何让视频在所有浏览器上都能播放？如何支持Ipad和IE876？请看下文。

开源方案：webm->flash放webm
视频文件格式：webm

支持：Safari（Windows、Mac OS）、Firefox、Chrome、IE9876、Opera

不支持：Safari（Ipad）

原理：在Firefox、Chrome、Opera中原生播放webm，在Safari（Windows、Mac OS）、IE9876中使用flash播放器播放webm。

优点：webm是开源格式，1个webm即可支持主流浏览器。

缺点：不支持Safari（Ipad），因为Safari（Ipad）不支持flash。

依赖于adobe flash player支持webm，adobe在2010年5月宣称flash player将支持webm（http://blogs.adobe.com/flashplatform/2010/05/adobe_support_for_vp8.html），截至2011年4月21日还没有结果。

商业方案：mp4->flash放mp4
视频文件格式：mp4

支持：Safari（Ipad、Windows、Mac OS）、Firefox、Chrome、IE9876、Opera

原理：检测浏览器是否支持播放mp4，不判断浏览器名称，只检测功能。

结果：在Safari（Ipad、Windows、Mac OS）、Chrome、IE9中原生播放mp4，在Firefox、Opera、IE876中使用flash播放器播放mp4。

优点：1个mp4文件，支持所有主流浏览器

缺点：mp4是专利格式，需考虑编码器授权

在线播放演示：整理中（如急需请联系本站QQ：473587358）

代码打包下载：整理中（如急需请联系本站QQ：473587358）

请注意flow player是GPL授权的（http://flowplayer.org/download/index.html），如果有闭源的需要，请购买flow player或者自己编译一个flex播放器，比较简单。

代码（采用公共领域授权，可任意使用）：

<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>html5 video</title>
</head>
<body>
<h2>2010 Ruse 360p</h2>
<div>
<video controls="controls" width="640" height="352" poster="http://www.happyelements.cn/wp-content/themes/happyelements/images/home.jpg" autoplay="autoplay">
<source src="http://www.happyelements.cn/wp-content/themes/happyelements/video/home.mp4" type="video/mp4" />
</video>
</div>
<h2>2010 Inception 720p</h2>
<div>
<video controls="controls" width="1280" height="532" poster="http://www.happyelements.cn/wp-content/themes/happyelements/images/home.jpg">
<source src="http://www.happyelements.cn/wp-content/themes/happyelements/video/home.mp4" type="video/mp4" />
</video>
</div>

function addFlashVideoPlayer()
{
var source_nodes = document.getElementsByTagName('source');
for(var i=0,l=source_nodes.length; i<l;i++)
{
  if(source_nodes[i].type.indexOf(config.video.type)!=-1)
  {
   if(source_nodes[i].parentNode.tagName.toLowerCase()=='video')//Firefox,Chrome,IE9
   {
    var video_element = source_nodes[i].parentNode;
    var video_element_container = video_element.parentNode;
    var autoplay = video_element.autoplay;
   }
   else
   {//IE876
    var div_element = source_nodes[i].parentNode;
    var video_element = div_element.getElementsByTagName('video')[0];
    var video_element_container = div_element;
    var autoplay = typeof(video_element.autoplay)=='undefined' ? false : true;
   }

   var params = {

    "flashvars":"config={"playerId":"player","clip":{"url":"video_file_url"},"playlist":["poster_file_url",{"url":"video_file_url","scaling":"fit","autoPlay":autoPlay_value,"autoBuffering":autoBuffering_value}]}",
    "src":config.flash.player_uri
   };
   params.flashvars = params.flashvars.replace(/video_file_url/g,source_nodes[i].src);
   params.flashvars = params.flashvars.replace(/poster_file_url/g,video_element.poster);
   params.flashvars = params.flashvars.replace(/autoPlay_value/g,autoplay);
   params.flashvars = params.flashvars.replace(/autoBuffering_value/g,config.flash.autoBuffering);

   var width = video_element.width;
   var height = video_element.height;
   var attributes = {
    "data":config.flash.player_uri,
    "width":width,
    "height":height
   };
   var flash_html = createFlashObjectHTML(attributes,params);
   var div_element = document.createElement('div');
   div_element.style.width = width;
   div_element.style.height = height;
   div_element.innerHTML = flash_html;
   video_element_container.insertBefore(div_element,video_element);
   video_element.style.display = "none";
  }
}
}
function createFlashObjectHTML(attributes,params)
{
var flash_html = '<object height="attribute_height" width="attribute_width" type="application/x-shockwave-flash" data="attribute_data"><param name="flashvars" value="param_flashvars" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="quality" value="high" /><param name="cachebusting" value="false" /><param name="bgcolor" value="#000000" /><param name="src" value="param_src" />html_when_no_flash</object>';
flash_html = flash_html.replace(/attribute_height/g,attributes.height);
flash_html = flash_html.replace(/attribute_width/g,attributes.width);
flash_html = flash_html.replace(/attribute_data/g,attributes.data);
flash_html = flash_html.replace(/param_flashvars/g,params.flashvars);
flash_html = flash_html.replace(/param_src/g,params.src);
flash_html = flash_html.replace(/html_when_no_flash/g,config.flash.html_when_no_flash);
return flash_html;
}

if(isVideoCanPlay(config.video.type)==false)
{
checkFlashVersion();
addFlashVideoPlayer();
}
</script>
</body>
</html>
青岛网站制作与青岛网站建设中对视频的应用越来越广泛，通过以上方法便能够使视频文件在苹果safari浏览器上流畅播放。

上一篇：力图数字科技2013年春节放假通知

下一篇：网站视频如何在苹果Safari上播放？

信息动态

网站设计是技术与创意的完美融合!

公司新闻

苹果播放视频代码

2012-08-15 16:32:05

延伸阅读

TAGS关键字

信息动态

网站设计是技术与创意的完美融合!

公司新闻

苹果播放视频 代码

2012-08-15 16:32:05

延伸阅读

TAGS关键字

苹果播放视频代码