首页 > 特效插件 > 视频音乐 >  playease.js视频播放插件，支持FLV/fMP4/DASH等，兼容IE8+正文

playease.js视频播放插件，支持FLV/fMP4/DASH等，兼容IE8+

特效介绍
playease.js是一个HTML5播放器，支持HTTP-FLV、WebSocket-FLV、WebSocket-fMP4、MPEG-DASH、RTMP(IE8-10)、HLS(iOS)等直播，以及HTML5之3大格式。同样采用MVC、事件驱动等，源码易于阅读和扩展。支持自定义水印，支持弹幕等。兼容IE8+浏览器。
提供了视频右上角logo的PSD源文件，各位可以改成自己的logo，然后在配置参数中，引入logo地址，即可。

playease.js视频播放

公众号：STUDEASE
QQ群：528109813
项目地址：https://github.com/studease/playease
快速预览：http://studease.cn/playease.html
使用方法
简单例子：
1、HTML代码： 
<div id='playwrap' style='margin: 0 auto; width: 100%; max-width: 640px; top: 0; left: 0;'>
    <div id='player'></div>
</div>
2、js代码： 
var pw = document.getElementById('playwrap');
var events = playease.events;
 
var player = playease('player');
player.addEventListener(events.PLAYEASE_FULLPAGE, onFullpage);
player.addEventListener(events.RESIZE, onResize);
player.setup({
    width: 640,
    height: 400,
    aspectratio: '16:9',
    file: '/vod/sample.flv',  //视频地址
    /*sources: [{
        file: 'http://127.0.0.1/live/sample.flv',
        type: 'flv',
        label: 'HTTP-FLV'
    }, {
        file: 'ws://127.0.0.1/live/sample.flv',
        type: 'flv',
        label: 'WS-FLV'
    }, {
        file: 'ws://127.0.0.1/live/sample',
        type: 'rtmpmate',
        label: 'WS-RTMPMATE'
    }, {
        file: 'ws://127.0.0.1/live/sample',
        type: 'wss',
        label: 'WS-fMP4'
    }, {
        file: 'http://127.0.0.1/live/sample/manifest.mpd',
        type: 'dash',
        label: 'MPEG-DASH'
    }, {
        file: 'rtmp://127.0.0.1/live/sample',
        type: 'flash',
        label: 'RTMP-STREAM'
    }, {
        file: 'http://127.0.0.1/live/sample/index.m3u8',
        type: 'def'
    }],*/
    mode: 'vod',
    controls: true,
    autoplay: false,
    //poster: 'sample.png',
    //report: true,
    loader: {
        name: 'xhr-chunked-loader',
        chunkSize: 2 * 1024 * 1024,
        mode: 'cors'
    },
    logo: {
        file: 'logo.png'  //logo地址
    },
    bulletscreen: {
        enable: true,
        visible: true
    },
    /*fullpage: {
        visible: true
    },*/
    render: {
        name: 'def',
        bufferLength: 4 * 1024 * 1024,
        swf: '../swf/playease.swf'
    }
});
 
function onFullpage(e) {
    pw.style.margin = e.exit ? '0 auto' : '0';
    pw.style.height = e.exit ? '' : '100%';
    pw.style.position = e.exit ? '' : 'fixed';
    pw.style.maxWidth = e.exit ? '640px' : '100%';
    pw.style.zIndex = e.exit ? '' : '99';
}
 
function onResize(e) {
    // x5-playsinline
    if (playease.utils.isAndroid() && playease.utils.isQQBrowser()) {
        var video = document.getElementById('player').firstChild.lastChild;
        video.style.width = window.innerWidth + 'px';
        video.style.height = window.innerHeight + 'px';
        video.style['object-position'] = 'center top';
        
        var controlbar = document.getElementById('player').childNodes[1];
        controlbar.style.top = e.height - 40 + 'px';
        controlbar.style.position = 'absolute';
        
        var next = document.getElementById('others');
        next.style.top = e.height + 'px';
        next.style.bottom = '0px';
        next.style.position = 'absolute';
        next.style.zIndex = 999;
    }
    
    // Something else
}
配置项：
文件目录：cn/studease/embed/playease.embed.config.js 
_defaults = {
    width: 640,
    height: 400,
    aspectratio: '16:9',
    file: '',
    sources: [],
    mode: rendermodes.VOD,
    bufferTime: .1,
    maxretries: 0,
    retrydelay: 3000,
    controls: true,
    autoplay: true,
    airplay: 'allow',
    playsinline: true,
    poster: '',
    report: false,
    debug: false,
    loader: {
        //name: 'xhr-chunked-loader', // For flv render in vod mode only. Otherwise, don't name it out.
        //chunkSize: 2 * 1024 * 1024, // For xhr-chunked-loader only
        mode: iomodes.CORS
    },
    logo: {
        visible: true
    },
    bulletscreen: {
        enable: true,
        visible: false
    },
    fullpage: {
        visible: false
    },
    render: {
        name: rendertypes.DEFAULT,
        //bufferLength: 4 * 1024 * 1024, // For flv render in vod mode only
        swf: 'swf/playease.swf'
    },
    skin: {
        name: skintypes.DEFAULT
    },
    events: {
        
    }
};
使用回调方法： 
playease('player').setup({
    ...
    events: {
        onReady: function(e) {
            console.log('onReady');
        },
        ...
    }
});
 
// or
 
var events = playease.events;
var player = playease('player');
player.addEventListener(events.PLAYEASE_READY, onReady);
player.setup({
    ...
});
 
function onReady(e) {
    console.log('onReady');
}
更多事件方法参见：
文件目录：cn/studease/api/playease.api.js 
_eventMapping = {
    onError: events.ERROR,
    onReady: events.PLAYEASE_READY,
    onMetaData: events.PLAYEASE_METADATA,
    onBuffering: events.PLAYEASE_BUFFERING,
    onPlaying: events.PLAYEASE_PLAYING,
    onPaused: events.PLAYEASE_PAUSED,
    onReloading: events.PLAYEASE_RELOADING,
    onSeeking: events.PLAYEASE_SEEKING,
    onStopped: events.PLAYEASE_STOPPED,
    onReport: events.PLAYEASE_REPORT,
    onMute: events.PLAYEASE_MUTE,
    onVolume: events.PLAYEASE_VOLUME,
    onVideoOff: events.PLAYEASE_VIDEOOFF,
    onHD: events.PLAYEASE_HD,
    onBullet: events.PLAYEASE_BULLET,
    onFullpage: events.PLAYEASE_FULLPAGE,
    onFullscreen: events.PLAYEASE_FULLSCREEN,
    onResize: events.RESIZE
};
接口： 
play(url)
pause()
reload()
seek(offset)
stop()
report()
mute(mute)
volume(vol)
videoOff(off)
hd(index)
bullet(enable)
fullpage(exit)
fullscreen(exit)
shoot(text)
resize(width, height)

TAGS: playease.js