向clappr播放器添加快退按钮

时间:2018-10-19 05:00:02

标签: html css clappr

<script type="text/javascript" src="https://www.easysport.tv/clappr/clappr.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js"></script>
<script src="https://www.easysport.tv/clappr/capture.js"></script>
<script src="https://www.easysport.tv/clappr/clappr-playback-rate-plugin.min2.js"></script>
<script src="https://cdn.jsdelivr.net/clappr.chromecast-plugin/latest/clappr-chromecast-plugin.js"></script>
<body oncontextmenu="return false;">
<body style="margin:0px;padding:0px;">
<div id="oper"></div>
<div id="bmx"></div>
<script>
var playerElement = document.getElementById("ttt"); 
var clap = {
source: 'http://playback.akamaized.net/streams/27460990_8266920_lsi5xneayoydkfu77yv_1/media/27460990_8266920_lsi5xneayoydkfu77yv_1@2756000p.m3u8?dw=80&ts=1539921600&hdnts=exp=1540097522~acl=/streams/27460990_8266920_lsi5xneayoydkfu77yv_1/media*~hmac=b4914d585730a37b815b20c5d550798a7ddb319d9ad65b2a0a3a916746cbe091&dw=86400',
watermark: "", position: 'top-right',
poster: '',
 height: "460px",
scale: "exactfit",
 width: "640px",
parentId: "#ttt",
plugins: [LevelSelector,ClapprCapturePlugin,PlaybackRatePlugin,ChromecastPlugin],   
mimeType: "application/x-mpegURL",
autoPlay: true,
mediacontrol: {seekbar: "#ff69b4 ", buttons: "#ff69b4 "}, 
chromecast: {
          appId: 'ff69b4',
          contentType: 'video/m3u8',
          media: {
            type: ChromecastPlugin.None,
            title: 'Live Broadcast',
            subtitle: 'Live Broadcast'

          }
        }

}
var player = new Clappr.Player(clap);
player.core.mediaControl.on('capture:base64', (b64) => {
var myWindow = window.open("", "Screen");
myWindow.document.write(`<img src="${b64}" />`);
    });

</script>

这是我尝试过的代码。我正在尝试向控制栏添加一个按钮,单击该按钮将使它倒退30秒。如果m3u8是可重绕的,那么我在JWPLAYER中有此功能,而我正在切换到Clapper,但似乎无法弄清楚那部分内容。任何想法或帮助都会很棒。

1 个答案:

答案 0 :(得分:0)

我围绕chromecast SDK创建了一个简单的包装器:
https://github.com/Fenny/ChromecastJS

var cc = new ChromecastJS()
cc.on('available', function() {
    cc.cast({
        content:'http://127.0.0.1/stream.m3u8'
    })
})
$('#rewind').on('click', function() {
    var time = (cc.Media.time - 30)
    if (time < 0) {
        time = 0
    }
    cc.seek(time)
})

包装器非常小(缩小了5.51 KB)

祝你好运!