Warning: mysql_query() [function.mysql-query]: Unable to save result set in D:\AppServ\www\newclick\common\db_order.php on line 50
your browser does not support the video.”" /> 网站制作中两种播放视频的方法_手机网站制作_网页设计制作_上海网站建设公司_内力互动网络
首页 > 最新动态 > 内力博客

网站制作中两种播放视频的方法

分类:制作    标签:    浏览[566771]    评论[]

01月19日
2015年

方法一、 使用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部分-->”

效果如下图:

上海手机网站建设 上海网站制作

评论 [发评论]
 
共 条记录
昵    称:
验证码: 看不清,换一张
以上网友发言只代表其个人观点,不代表内力互动的观点或立场。

更多我们的作品

qq客服在线客服