星空网 > 软件开发 > Java

html5 video

先简要概述一下video标签:

video:嵌入视频到页面中

1. 声明video标签

单个视频的时候使用src:

<video src='/images/loading.gif' data-original="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> Your browser does not support the <code>video</code> element.</video>

多个视频的时候使用<source>标签:

<video controls> <source src='/images/loading.gif' data-original="SampleVideo.ogv" type="video/ogv"> <source src='/images/loading.gif' data-original="SampleVideo.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element.</video>

浏览器会先去识别是否支持Ogg格式文件,如果不支持,就读取MPEG-4的文件。同时可以规定编码格式,如下:

<video controls> <source src='/images/loading.gif' data-original="SampleVideo.ogv" type="video/ogv; codecs=dirac, speex"> Your browser does not support the <code>video</code> element.</video>

2. 视频格式

不同的浏览器支持的格式不同参考Media formats supported by the audio and video elements:

html5 video

经验总结:

通常嵌入的视频无法播放是2个原因,第一个是视频格式浏览器不支持,第二个原因是没有安装播放支持的插件。因为内嵌视频实际上会耗费很大资源,同时存在十分严重的兼容性问题,所以通常鼓励的事将视频嵌入到第三方播放网站执行。

提供几个方便实用的网站:

1. flowplayer:上传文件之后,自动生成文件链接,可以直接嵌入html页面中,支持HTML5(不过要付费。。。)

html5 video

例如:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>video</title></head><body>  <video controls>    <source type="application/x-mpegurl" src='/images/loading.gif' data-original="http://cdn.flowplayer.org/202777/96295-sunsetthroughsomeflowers2W1tsD5OeH.m3u8">    <source type="video/webm" src='/images/loading.gif' data-original="http://cdn.flowplayer.org/202777/96295-sunsetthroughsomeflowers2W1tsD5OeH.webm">    <source type="video/mp4" src='/images/loading.gif' data-original="http://cdn.flowplayer.org/202777/96295-sunsetthroughsomeflowers2W1tsD5OeH.mp4">  </video></body></html>

新建页面,执行代码,可以看到支持HTML5的浏览器可以进行视频播放。

2. Video for Everybody: 兼容各大浏览器中关于video的问题,同时有一些关于视频压缩格式的建议

html5 video

3. mediaelementjs: 推荐的补丁

html5 video

4. vid.ly: 在线转换视频网站(只能免费转换一个视频)

html5 video

4. online-convert:在线转换视频网站

html5 video

参考资料:

1. MDN:HTMLVideoElement

2. MDN:Using HTML5 audio and video

3. MDN:<video>

4. html5please




原标题:html5 video

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊卖家处理恶意差评的有效方法锦集!:https://www.ikjzd.com/articles/10829
WEEE认证是什么?WEEE认证和WEEE注册有什么区别?:https://www.ikjzd.com/articles/108290
没有资源的跨境新卖家,如何快速建立客源?:https://www.ikjzd.com/articles/108291
非洲跨境电商注意:尼日利亚增值税涨至7.5%!:https://www.ikjzd.com/articles/108292
shopee跨境电商“新的蓝海” 让你躺着收钱!:https://www.ikjzd.com/articles/108293
第19号超强台风逼近日本,铁路和航班将大规模停运!:https://www.ikjzd.com/articles/108294
TikTok 将推出先买后付服务 :https://www.kjdsnews.com/a/1836651.html
TikTok 将推出先买后付服务 :https://www.goluckyvip.com/news/188219.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流