版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://carlscoollife.blogbus.com/logs/125121432.html
稍微看了一下HTML5中的video嵌入问题。 记录一下
1. HTML5 是一些新的HTML特性的集合,HTML5中的各个功能在不同浏览器上的支持程度不同。简单的说某某浏览器支持HTML5是没有意义的,正确的说法是某某是否支持HTML5中的某个tag 比如video.
2. HTML5中的一个最大的特性就是<video>了,可以嵌入视频,而从前主要要靠flash. 那么大家当然不希望都用 Adobe的东西,于是采用了<video>来嵌入。其实video很简单,但是又有浏览器支持的问题,老的浏览器当然不至支持video啦,于是要用flash, 不同浏览器支持的视频类型又有些不同,特别的现在有了iPhone, iPod,Android他们支持的情况也有区别。因此本来简简单单的<video>又变得复杂纠结起来。
更有奇怪的事情,就是firefox浏览器不支持loop="true"这个属性,不能使用这个属性来控制视频自动播放。好在我们可以写一段javascript来获取ended事件,然后启动start()来重新开始播放。
一个简单的例子如下。 一部分是说明了如何支持多浏览器,一部分是说明了如何使用javascript对于firefox重新loop.
<!-- use this script to enable loop in browswer doesn't support loop, like Firefix -->
<script>
var v = document.createElement("video"); // Check if the browser supports the video tag
if ( !v.play ) { // If no, use Flash.
}
else {
// fix for firefox not looping
var myVideo = document.getElementById('myvideo');
if (!(typeof myVideo.loop == 'boolean')) { // loop supported
myVideo.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
}
}
</script>
<video id="myvideo" preload="none" loop="loop" width="640px" height="480px" controls="controls" loop="true" autoplay="autoplay">
|<!-- for browsers support ogg, like Chrome, Firefox 4, Opera, IE 9 -->
<source src="test.ogg" type="video/ogg" loop="loop" />
<!-- for browswers support mp4, like Safari -->
<source src="test.m4v" type="video/ogg" loop="loop" />
<!-- for that does not support the video tag, here i insert some random swf file. -->
<div><object width='480' height='370' ><param name='allowScriptAccess' value='always' /><embed pluginspage='http://www.macromedia.com/go/getflashplayer' src='some_flash.swf' type='application/x-shockwave-flash'></embed></object></div>
</video>
分享到:
相关推荐
标签-处理自动播放 书签-获取书签项目详细信息(URL) 安装 添加在 从Mozilla 获取加载项 主机应用 (我需要Windows支持的帮助) Linux,MacOS,BSD 依存关系 curl (仅适用于安装脚本) python3 下载并运行/host/...
自动播放; 3.列表编辑; 4.多界面选择; 5.播放控制; 6.视频调节; 7.可编辑快捷键; 8.丰富的FSCommand命令; 9.有对Flash文件的各种提取和转换,解除保护等处理功能; 10.可智能地搜索网络的Flash; 11.整合了IE;...
当前功能包括: 同时支持Firefox和Chrome Firefox运行“无头”,这意味着它不会打开窗口,而是在后台运行该进程。 Chrome将打开一个窗口能够即时编辑订阅选项,播放列表链接和默认浏览器选项要求Python 3.x ...
Chrome版本的Firefox的FlashStopper使视频播放器(Flash和html5)显示视频缩略图而不是自动播放…功能:•允许网站自动播放•允许网站会话自动播放仅停止网站连续会话的第一个自动播放(对于视频网站,例如...
[关于兼容性] 建议使用chrome firefox ie9+ 体验更完整。ie8以下基本上不做兼容处理。chrome支持文件夹拖拽上传。 [文件打开] office文件在线预览功能,服务器必须在公网(外部能访问该服务器) [忘记密码] 修改data...
关于评论表单在firefox下变形,匿名不起作用 7.投稿问题,会员投稿新增可以自行选择后台栏目 8.Flv视频播放在使用带端口的域名时播放器路径没有端口不能播放 9.安装文件时版权链接不是风讯的网址 10.子类列表...
关于评论表单在firefox下变形,匿名不起作用 7.投稿问题,会员投稿新增可以自行选择后台栏目 8.Flv视频播放在使用带端口的域名时播放器路径没有端口不能播放 9.安装文件时版权链接不是风讯的网址 10.子类列表...
2)修正FireFox下插入WMA等音频文件不能播放的BUG. 3)修正关闭图像预览后可能出现的BUG. 4)修正保存图片到本地的一些BUG. 5)更新配置器,增加保存远程图片到本地功能的配置. 2009/12/10 Version 6.1.3 For VS2005/...
19、支持各类浏览器:IE6/IE7/IE8/IE9/IE10/IE11/Firefox/谷哥Chrome/QQ浏览器/360浏览器。 酷播跨平台多终端网页播放器基础功能说明: 1、支持Flv,mp4,mov,f4v,3gp视频格式播放(跨平台时,只考虑mp4格式,不考虑...
TS流进行回放最好的情况下,只有1秒的极低延迟支持处理动态编解码器参数更改(例如,视频分辨率更改) 支持Chrome,FireFox,Safari,Edge(旧版或Chromium)或任何基于Chromium的浏览器支持自动跟踪...
除一些提供分享代码的视频的网站,基本所有基于Flash播放器的视频网站都可获取其视频播放地址 腾讯视频格式为:http://static.video.qq.com/v1/res/qqplayerout.swf?f=3&vid=j0090FAoXzv 把后面红色部分替换为正常...
千博企业网站管理系统的界面设计遵循最新的 W3C 国际网页设计标准,网站无论运行在 IE、Opera、Netscape 甚至挑剔的 Firefox 浏览器上,都能流畅、完整、真实地展示出您的网站。千博企业网站管理系统遵循多浏览器、...
千博二手车网站系统的界面设计遵循最新的 W3C 国际网页设计标准,网站无论运行在 IE、Opera、Netscape 甚至挑剔的 Firefox 浏览器上,都能流畅、完整、真实地展示出您的网站。千博二手车网站系统遵循多浏览器、高...
千博企业网站管理系统的界面设计遵循最新的 W3C 国际网页设计标准,网站无论运行在 IE、Opera、Netscape 甚至挑剔的 Firefox 浏览器上,都能流畅、完整、真实地展示出您的网站。千博企业网站管理系统遵循多浏览器、...
千博二手车网站系统的界面设计遵循最新的 W3C 国际网页设计标准,网站无论运行在 IE、Opera、Netscape 甚至挑剔的 Firefox 浏览器上,都能流畅、完整、真实地展示出您的网站。千博二手车网站系统遵循多浏览器、高...