当前位置:首页 > 开发 > Web前端 > Html5 > 正文

html5插入mp4视频文件

发表于: 2013-10-22   作者:alleni123   来源:转载   浏览次数:
摘要: 如下所示,  全部的文件在压缩包中 具体的我也没看, 就试了一下能看视频。 <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta http-equiv="Content-Type" content="text/html; char
如下所示,  全部的文件在压缩包中
具体的我也没看, 就试了一下能看视频。

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>html5 video</title>
</head>
<body>
<h2>video 1</h2>
<div><!--每个video都需要有一个单独的parentNode,即每个video外面都有个div或者p等等。为了兼容IE876-->
        <video controls="controls" width="640" height="352" poster="http://www.laikabase.de/cp_view/images/userfiles/slideshows/19_thumb_Shift_Image1.jpg" autoplay="autoplay">
                <source src="hunter100.mp4" type="video/mp4"></source>
        </video>
</div>
<h2>video 2</h2>
<div>
        <video controls="controls" width="500" height="500" poster="http://i782.photobucket.com/albums/yy104/stevenk0519/th_cow.jpg">
                <source src="http://i782.photobucket.com/albums/yy104/stevenk0519/cow.mp4" type="video/mp4" />
        </video>
</div>


<script type="text/javascript">
var config = {
	"video":{
		"type":"video/mp4"
	},
	"flash":
	{
		"player_uri":"http://www.happyelements.cn/wp-content/themes/happyelements/flash/flowplayer-3.2.7.swf",
		"need_version":"10,0,0,0",
		"autoBuffering":true,
		"html_when_no_flash":"<a target=\"_blank\" href=\"http://www.adobe.com/go/getflash\"><img height=\"39\" width=\"158\" src=\"http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png\" alt=\"Get Adobe Flash player\" /></a>"
	}
};
function checkFlashVersion()
{
	var flash_html = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=need_version" width="0" height="0" data="player_uri"><param name="src" value="player_uri" /></object>';
	flash_html = flash_html.replace(/player_uri/g,config.flash.player_uri);
	flash_html = flash_html.replace(/need_version/g,config.flash.need_version);
	var div_element = document.createElement('div');
	div_element.style.width = '0';
	div_element.style.height = '0';
	div_element.innerHTML = flash_html;
	document.body.appendChild(div_element);
}
function isVideoCanPlay(video_type)
{
	var video_element = document.createElement('video');
	if(typeof(video_element.canPlayType)=='undefined')
	{
		return false;
	}
	var result = video_element.canPlayType(video_type);
	if((result=='probably')||(result=='maybe'))
	{
		return true;
	}
	return false;
}

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={&quot;playerId&quot;:&quot;player&quot;,&quot;clip&quot;:{&quot;url&quot;:&quot;video_file_url&quot;},&quot;playlist&quot;:[&quot;poster_file_url&quot;,{&quot;url&quot;:&quot;video_file_url&quot;,&quot;scaling&quot;:&quot;fit&quot;,&quot;autoPlay&quot;:autoPlay_value,&quot;autoBuffering&quot;: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>

html5插入mp4视频文件

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
前期可视化制作步骤: 第一步:新建一个空FLASH文档,在库面板的弹出菜单中选择"新建视频"建立一个
Word2007和Word2010插入视频文件的步骤差不多,在这里,我们放在一起为大家介绍。 1、选择“文件”
Word2007和Word2010插入视频文件的步骤差不多,在这里,我们放在一起为大家介绍。 1、选择“文件”
下面的软件下载地址:http://download.csdn.net/source/2607382 ftyp: 这是一个筐,可以装mdat等其
[size=large]研究ISO_IEC 14496-12_2005(E),学习MP4文件格式,Media Data Box:A container box whi
1 Summary MPEG-4 Part 14 or MP4 file format, formally ISO/IEC 14496-14:2003, is a multimedia
现在在线视频越来越多了,想下载怎么办?下面我总结了三条方法,好好学习哦。恩。主要是针对FLV视频
转自:http://blog.chinaunix.net/uid-24922718-id-3692670.html 解复用视频文件:就是提取出音频文
早上收到主内一个姊妹的来信,给我发过来一个圣诞快乐的沙画视频,于是点击到youku去看了一下,感谢
删除的视频文件如何恢复?各种数码摄像机的DV录像一旦丢失,或删除,或格式化,有办法恢复么?作为
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号