js网页视频播放: vcastr22 、 flowplayer 、 jwplayer

最新推荐文章于 2024-08-21 08:44:55 发布

Michaelwubo

最新推荐文章于 2024-08-21 08:44:55 发布

阅读量455

点赞数

本文链接：https://blog.csdn.net/Michaelwubo/article/details/105768024

版权

h5的video标签通过插件方式播放，不在依赖flash浏览器播放插件即可播放，成为h5新规范。嵌入到浏览器插件有多中。

windows平台IE利用Activex控件播放flash。其他浏览器使用netscape插件技术老播放flash。

video支持的格式:mp4,webm，ogg

实例结构：

实例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="#" οnclick="jwplayer().seek(0);">one</a> (00:00)</li>
  <li><a href="#" οnclick="jwplayer().seek(106);">two</a> (01:46)</li>
</ul>
-->