html5插入mp4视频文件
如下所示, 全部的文件在压缩包中
具体的我也没看, 就试了一下能看视频。
<!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={"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>
html5插入mp4视频文件相关推荐
- dede织梦编辑器中插入mp4视频文件方法
dede织梦编辑器中插入****mp4****视频文件方法 场景: 织梦建站的时候 上传mp4视频不成功 思路: a. 登录后台->系统->系统基本参数->附件设置 查 允许上传的文 ...
- html5插入video视频文件,为什么有声音不显示画面
插入video <video width="560px" height="340px" src="白宇.朱一龙 - 时间飞行~1.mp4&quo ...
- kindeditor html5视频,kindeditor编辑器插入mp4视频不显示及不过滤video的方法
传视频是单独做了htm5的video调用,所以在电脑及移动设备上访问没问题,但是很多地方比如题目,题目解析等都在kindeditor编辑器里面添加的,因为肯定要添加图文,但是添加视频的话,因为kind ...
- atitit.mp4 视频文件多媒体格式结构详解
atitit.mp4 视频文件多媒体格式结构详解 1. 一.基本概念1 2. MP4文件概述2 3. mp4是由一个个"box"组成的,2 4. 典型简化mp43 5. Fragm ...
- 常用MIME类型,解决IIS布署后字体文件、mp4视频文件等not found 的错误
前言:项目在本地运行正常,但部署在IIS服务器后使用浏览器访问项目会报:404 not found 错误,包括mp4视频文件和woff文件找不到..如下 原因:在IIS中没有将 .mp4和 .woff ...
- 怎么修复SONY索尼相机摄像机断电死机损坏的MP4视频文件
索尼SONY相机a系列微单,摄像机AX,NX系统等录制的MP4文件,拍摄中如果遇到相机死机,断电,电池没电等异常情况,一般在相机存储卡里或者相机内存里会有文件,但是这个文件相机无法回放,导到电脑中也播 ...
- 为何恢复出来的MP4视频文件打不开
MP4是一种集音频.视频.图片浏览.电子书.收音机等于一体的多功能播放器.在众多的视频格式中,MP4也算是大家常用的一种.有时候我们会不小心弄丢MP4里面的视频文件,但是想尽办法恢复之后却发现有MP4 ...
- 如何将MP4视频文件转换成GIF动态图片
在观看电视剧时,剧中常会出现很多搞笑滑稽的镜头,比如把视频MP4转GIF动态图片,那么效果就很好了.虽说现在很多的手机视频播放器都有制作GIF的功能,不过也就10秒钟左右,时间很短,如果使用软件制作G ...
- GIF转MP4 - 在线将GIF动态图转为MP4视频文件
如何把 GIF 转成视频?一刀工具箱提供几秒钟内将 GIF 转换为 MP4 文件的最佳方法,在线将 GIF 动态图转为 MP4 视频文件,100% 免费.安全并便于操作! 代码片段 chooseIma ...
最新文章
- 假笨说-协助美团kafka团队定位到的一个JVM Crash问题
- Spring Boot JWT 快速入门
- (2) pandas 文件读写 (csv)
- 怎么让照片变年轻_做了隆鼻,至少年轻5岁
- 机器学习--聚类分析(划分方法,层次方法、密度方法)
- 去掉WORD文档中首页的页眉及页眉的横线
- 为小巨人记一笔,等待明日新星的升起
- (Emitted value instead of an instance of Error) <swiper-slide v-for=“img in allData.url“>: component
- 计算机服务器属无形资产吗,服务器属于固定资产还是无形资产
- [论文阅读1]Re-identification with RGB-D sensors
- 河南省多校联盟二-F 线段树+矩阵
- 华硕飞行堡垒无线网卡9462黄色感叹号
- Python分析微信好友性别比例
- 【elasticsearch】elasticsearch教程 es整合springboot教程 kibana安装教程 解决kibana访问404
- python插值_python插值
- 移动端H5页面在线预览Word、Excel、PPT、PDF
- SteamOS 2.0,Raspberry Pi上的仿真器以及更多开放游戏新闻
- 【人脸识别】KL变换人脸识别【含GUI Matlab源码 859期】
- openFrameworks下的肤色检测源码
- 博图TIA软件安装完成后各软件作用