1. 程式人生 > >js網頁視頻播放: vcastr22 、 flowplayer 、 jwplayer

js網頁視頻播放: vcastr22 、 flowplayer 、 jwplayer

www. nta storm loading ati onclick 播放列表 music file

實例結構:

技術分享


實例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>

-->


技術分享




;

js網頁視頻播放: vcastr22 、 flowplayer 、 jwplayer