使用jQuery使用Flowplayer嵌入电影

最新推荐文章于 2024-09-22 11:17:00 发布

dingshi7798

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量187

点赞数

文章标签： javascript ViewUI

请按照以下简单步骤使用Flowplayer （开放源代码视频播放器） 嵌入电影 。您可以对播放器进行大量定制，我将在单独的文章中更详细地分享这些定制-包括ipad支持，自定义控件，RTMP / RTSP实时流，自动播放，剪辑缩放，播放器调试，更改分辨率，动态视频尺寸等...这篇文章详细介绍了播放器的最小设置，以帮助您入门。

相关文章：

scaling-fit

的HTML

jQuery的

//video or stream address
var streamAddressFull = "http://streamaddress/mp4:filename/playlist.m3u8",
    vidElem = $('#fms'),
    statusElem = $('#video-stream-status .status');

$f('fms', "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf",
{
    /** ------- Error Handling -------- **/

    debug: debug,  //output all events triggered by the Flash component to the console

    onError: function(e)
    {
        statusElem.html("Error: (code:"+e+").");
    },

    // we need at least this version of flash
    version: [9, 115],

    // older versions will see a custom message
    onFail: function()
    {
          statusElem.html("You need the latest Flash version to view MP4 movies. " + "Your version is " + this.getVersion());
    },

    onBeforeLoad:function()
    {
        statusElem.html("Loading...");
    },

    /** ------- Clip Configurations -------- **/

    clip:
    {
        url: streamAddressFull,
        scaling: 'fit', //fit, scale, orig, half
        autoPlay: true,
        autoBuffering: true,

        onStart: function(clip)
        {
            statusElem.html("Playing.");
        }
    },

    plugins:
    {
        controls:
        {
            // display properties such as size, location and opacity
            right: 0,
            bottom: 0,
            opacity: 0.95,
            backgroundGradient: 'low', //faded slightly
        }
    },

    /** ------- Look and Feel -------- **/

    canvas:
    {
        backgroundGradient: 'none',
        backgroundColor: '#000000'
    }

});

From: https://www.sitepoint.com/jquery-embed-movie-flowplayer/