JS 实现网页视频播放: vcastr22 、 flowplayer 、 jwplayer

来源:互联网 发布:诺基亚e63商店软件下载 编辑:程序博客网 时间:2024/05/18 06:19

实例结构:


实例下载:

http://url.cn/MWZW3Q


实例1: demo.html

<embed src="vcastr22.swf?vcastr_file=../wujiandao.flv" allowFullScreen="true" quality="high" type="application/x-shockwave-flash" width="640" height="320"></embed>



实例2: demo.html

<script type="text/javascript" src="flowplayer/flowplayer.min.js"></script><a style="display:block;width:640px;height:320px" id="player"></a> <script>flowplayer("player", "flowplayer/flowplayer.swf", {       //player是html中的id名---->修改处1    clip: {        autoPlay: false,                                  //是否自动播放        autoBuffering: true,                              //是否在播放前显示画面        baseUrl: ''                                       //基础地址,比如 http://www.meishichina.com/    },    playlist: [        '../wujiandao.flv',                              //文件路径---->修改处2        //'9483.mp4',                                     //下一个文件...        {            //url: "/media/empire.mp3",                   //非flv文件            //duration: 25                                //持续时间        }    ],    plugins: {        controls: {            url: 'flowplayer/flowplayer.controls.swf',    //播放器文件            playlist: true,                               //是否支持播放列表            backgroundColor: '#373737',                   //播放界面的背景色            tooltips: {                buttons: true,                            //全屏按钮                fullscreen: '全屏'                        //全屏按钮的浮动提示文字            }        }    },    onFinish: function() {        //alert("Click Player to start video again");       //播放完后的弹出提示文字    }});</script><!--第二种方法: 最简的使用方法, 不需要设置参数.<script type="text/javascript" src="flv/flowplayer.min.js"></script><a id="player" href='flv/wujiandao.flv' style="display:block;width:640px;height:320px" ></a><script>flowplayer("player", "flv/flowplayer.swf")</script>-->




实例3: demo.html

<script type="text/javascript" src="jwplayer/jwplayer.js" ></script><div id="myElement">Loading the player...</div><script type="text/javascript">    jwplayer("myElement").setup({        file: "../wujiandao.flv",        width: '640',        height: '320',        image: "",         //skin: 'stormtrooper.zip'    });</script><!--++++++++++++++++++++++++++++++++++++++++支持播放音频格式的文件<script type="text/javascript" src="jwplayer/jwplayer.js" ></script><div id="myElement">Loading the player...</div><script type="text/javascript">    jwplayer("myElement").setup({        file: '/music/audio.mp3',        controlbar: 'bottom'    });</script>++++++++++++++++++++++++++++++++++++++++支持播放列表<script type="text/javascript" src="jwplayer/jwplayer.js" ></script><div id="container"></div><script type="text/javascript">    jwplayer("container").setup({        'flashplayer': 'jwplayer.swf',        'playlist': [{            'file': '/videos/video1.mp4',             'image': '/thumbs/video1.jpg',            'title': 'The first video'        },{             'file': '/videos/video2.mp4',             'image': '/thumbs/video2.jpg',            'title': 'The second video'        }],        repeat: 'list'    });</script>++++++++++++++++++++++++++++++++++++++++支持播放定位<script type="text/javascript" src="jwplayer/jwplayer.js" ></script><div id="container"></div><script type="text/javascript">  jwplayer("container").setup({    file: "/videos/sintel.mp4",    flashplayer: "/jwplayer/player.swf",    height: 306,    width: 720  });</script><ul>  <li><a href="#" onclick="jwplayer().seek(0);">one</a> (00:00)</li>  <li><a href="#" onclick="jwplayer().seek(106);">two</a> (01:46)</li></ul>-->