码迷,mamicode.com
首页 > Web开发 > 详细

比较好的播放视频插件swfobject.js

时间:2015-01-06 10:14:26      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:插件   javascript   html5   video   swfobject   

播放视频的方法:

方法一、 使用html5播放


    <video src="./files/Clip_480_5sec_6mbps_h264.mp4" width="1000px" height="400px" controls="controls" loop="loop" autoplay="autoplay" poster="images/zzsm.png" style="border:1px solid red;">your browser does not support the video.</video>

poster用来设置视频的封面图,

loop是否循环播放

autoplay是否自动播放

controls是否显示控制按钮

缺点:兼容不太好

方法二:使用视频插件swfobject.js 

首先下载下载所需要的文件,在demo.html中

 <!--video_1部分-->
    <div class="video_1" id="a1">
        <!--<img src="{$web_path}images/banner1.jpg" />-->
    </div>
    <script type="text/javascript" src="js/swfobjects.js"></script>
    <script type="text/javascript">
        var v = new SWFObject("files/flvplayer.swf", "single", "1100", "550", "1");
        v.addParam("allowfullscreen", "true");       //可以让视频撑满限定的宽度和高度*
        v.addParam("wmode", "transparent");      //可以将视频设置不为最高层,其他层可以覆盖住视频*
        v.addVariable(‘volume‘, ‘40‘);
        v.addVariable("autostart", ‘false‘);
        v.addVariable("overstretch", "true");
        v.addVariable("file", "files/11.flv");//视频路径
        v.addVariable("image", "images/banner1.jpg");//设置视频封面图
        v.write("a1");
    </script>
    <!--end of video_1部分-->

效果如下图:技术分享

比较好的播放视频插件swfobject.js

标签:插件   javascript   html5   video   swfobject   

原文地址:http://blog.csdn.net/u012011360/article/details/42425577

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!