Web视频播放 之 【HTML5 Video标签】-阿里云开发者社区

开发者社区> double2li> 正文

Web视频播放 之 【HTML5 Video标签】

简介: 一、说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级。但在浏览器兼容、视频协议支持方面还有一些需要注意的问题。 二、浏览器兼容 html5 Video标签目前IE9+ 及 其他主流浏览器都能够支持。
+关注继续查看

一、说明

HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级。但在浏览器兼容、视频协议支持方面还有一些需要注意的问题。

二、浏览器兼容

html5 Video标签目前IE9+ 及 其他主流浏览器都能够支持。

对于IE8及以下的IE浏览器,可考虑引入html5扩展支持js来尝试解决,未亲测。

三、视频协议支持

支 持:Ogg、MPEG4、WebM 
不支持:rtmp、rtsp(如果进行转码,切成HLS可以播放,但是即使在局域网内也有3秒左右的时延)

注:更详细的视频格式支持希望有知情的朋友告知,多谢!

四、DEMO

更多的属性、方法和事件参考本文参考资料中的API列表;

<!-- 定义一个video标签:
    autoplay:自动播放;
    controls:显示视频控件;
    src:指定视频源;
    width,height:制定视频的显示尺寸;
 -->
<video id="my_video" autoplay controls      src="https://media.w3.org/2010/05/sintel/trailer.mp4" width="500" height="500">
</video>

<script type="text/javascript">
    //获取视频对象
    var myVideo=document.getElementById("my_video");

    //播放视频
    function play(){
        myVideo.play();
    }
    //暂停视频
    function pause(){
        myVideo.pause();
    }
</script>

五、参考资料

  1. HTML5 Video详细API:https://msdn.microsoft.com/zh-cn/library/hh772500(v=vs.85).aspx
  2. HTML5 Video详细功能DEMO:http://www.w3.org/2010/05/video/mediaevents.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
从零开始学 Web 之 DOM(一)DOM的概念,对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1000 0
专注情感故事短视频,三感video获千万级A+轮融资
情感故事短视频三感video获得千万级A+轮融资,投资方为微博和合一资本,本轮融资将用于拓宽内容品类、发力红人经纪以及情感服务平台“三感情感”的服务升级。
204 0
Webpack 2 视频教程 003 - Webpack 项目初始化
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」。 Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的。
779 0
【我的Android进阶之旅】推荐一款视频转换GIF图片格式的转换工具(Video to GIF)
一、背景 最近想把一些Android Demo的运行效果图获取下来,但是一直使用真机进行调试,在电脑上不好截取一段gif动画。而之前使用模拟器的时候可以使用 GifCam 工具进行屏幕动画截取。
1701 0
如何获取HTML5视频的持续时间
HTML5视频的Bigger体验是非常令人振奋的,很简单的道理,不用加载和依赖烦人的Flash或其他第三方插件来播放视频,也是大功一件。我们可以通过自定义控件对视频进行显示和操控,其中一个常见的需求是显示视频的时长(duration)。
695 0
+关注
double2li
一个在IT行业摸爬滚打的老司机
2870
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载