欢迎光临朱凯的个人博客!
朱凯,a3.work

使用html5来播放视频

 发布时间: 2016-12-19 10:22      原创:  朱凯      评论: .       .人查看

第一次在本博客分享视频,发现微信浏览器看不了,swf还是有缺陷,得先安装flash才行。

研究了下 html5 的video标签,通过 video-js 插件实现。

代码分享:

<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script>videojs.options.flash.swf = "video-js.swf";</script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="420" height="280"
poster="http://a3.work/_/img/png/a3/logo2.png"
data-setup='{"example_option":true}'>
    <source src="视频地址" type='video/mp4' />
    <source src="视频地址" type='video/webm' />
    <source src="视频地址" type='video/ogg' />
</video>

代码解释:

1.  先引入 css/js 文件

2.  vjs-big-play-centered 播放按钮居中,默认在左上角

3.  poster 背景图

转载请注明来源:   使用html5来播放视频  - 朱凯博客

分享是一种快乐,也是一种美德:
¥打开支付宝,扫码领红包¥ 红包

支付宝 aliPay

微信 wxPay