Jump to content
  • 0

Videojs Playlist ( videojs-playlist.js ) and ANtMedia


Notelseit Srls
 Share

Question

I have to implement this playlist between two streams, I'm using the js videojs-playlist.js library, but when I put the antmedia stream the stress is not recognized and the message "the media could not be loaded, either because the server or network is shown failed or because the format is not supported ", any suggestions?



<li


nk href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/><link href="https://vjs.zencdn.net/5.16.0/video-js.min.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/5.16.0/video.min.js"></script>
<script src="https://rawgit.com/atlance01/vrapp-ionic/master/www/js/lib/videojs-playlist.js"></script>

<video class="video-js vjs-default-skin" controls width="640px" height="360px"></video>
<button class="previous" hidden="hidden">Previous</button>
<button class="next">No view ? click here</button>
<button class="jump" hidden="">Play Third</button>

       
<script>


// https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md

var videoList = [{
  sources
: [{
    src
: 'https://streaming.antmedia.ext:5443/LiveApp/play.html?name=stream1',
 type
: 'application/x-mpegurl'
 
}],
  poster
: 'https://www.rt.com/static/img/og-logo-rt.png'
}, {
  sources
: [{
    src
: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    type
: 'video/mp4'
 
}],
  poster
: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
  sources
: [{
    src
: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
    type
: 'video/mp4'
 
}],
  poster
: 'https://vjs.zencdn.net/v/oceans.png'
}, {
  sources
: [{
    src
: 'http://media.w3.org/2010/05/bunny/movie.mp4',
    type
: 'video/mp4'
 
}],
  poster
: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
  sources
: [{
    src
: 'http://media.w3.org/2010/05/video/movie_300.mp4',
    type
: 'video/mp4'
 
}],
  poster
: 'http://media.w3.org/2010/05/video/poster.png'
}];
var player = videojs(document.querySelector('video'), {
  inactivityTimeout
: 0
});
try {
 
// try on ios
  player
.volume(1);
 
// player.play();
} catch (e) {}
//player.playlist(videoList, 4);/// play video 5
player
.playlist(videoList);
document
.querySelector('.previous').addEventListener('click', function() {
  player
.playlist.previous();
});
document
.querySelector('.next').addEventListener('click', function() {
  player
.playlist.next();
});
document
.querySelector('.jump').addEventListener('click', function() {
  player
.playlist.currentItem(2); // play third
});

player
.playlist.autoadvance(0); // play all

Array.prototype.forEach.call(document.querySelectorAll('[name=autoadvance]'), function(el) {
  el
.addEventListener('click', function() {
   
var value = document.querySelector('[name=autoadvance]:checked').value;
   
//alert(value);
    player
.playlist.autoadvance(JSON.parse(value));
 
});
});

/* ADD PREVIOUS */
var Button = videojs.getComponent('Button');

// Extend default
var PrevButton = videojs.extend(Button, {
 
//constructor: function(player, options) {
  constructor
: function() {
   
Button.apply(this, arguments);
   
//this.addClass('vjs-chapters-button');
   
this.addClass('icon-angle-left');
   
this.controlText("Previous");
 
},

 
// constructor: function() {
 
//   Button.apply(this, arguments);
 
//   this.addClass('vjs-play-control vjs-control vjs-button vjs-paused');
 
// },

 
// createEl: function() {
 
//   return Button.prototype.createEl('button', {
 
//     //className: 'vjs-next-button vjs-control vjs-button',
 
//     //innerHTML: 'Next >'
 
//   });
 
// },

  handleClick
: function() {
    console
.log('click');
    player
.playlist.previous();
 
}
});

/* ADD BUTTON */
//var Button = videojs.getComponent('Button');

// Extend default
var NextButton = videojs.extend(Button, {
 
//constructor: function(player, options) {
  constructor
: function() {
   
Button.apply(this, arguments);
   
//this.addClass('vjs-chapters-button');
   
this.addClass('icon-angle-right');
   
this.controlText("Next");
 
},

  handleClick
: function() {
    console
.log('click');
    player
.playlist.next();
 
}
});

// Register the new component
videojs
.registerComponent('NextButton', NextButton);
videojs
.registerComponent('PrevButton', PrevButton);
//player.getChild('controlBar').addChild('SharingButton', {});
player
.getChild('controlBar').addChild('PrevButton', {}, 0);
player
.getChild('controlBar').addChild('NextButton', {}, 2);
//player.controlBar.addChild('SharingButton', {}, 6);

//var MyButton = player.controlBar.addChild(new MyButtonComponent(), {}, 6);

//const ControlBar = videojs.getComponent('ControlBar');
//ControlBar.prototype.options_.children.splice(ControlBar.prototype.options_.children.length - 1, 0, 'SharingButton');

// Register the new component
//videojs.registerComponent('SharingButton', SharingButton);
//player.getChild('controlBar').addChild('SharingButton', {});


       
</script>

       
<style>
html
,
body
{
  width
: 100%;
}

.video-holder,
.video-holder * {
  box
-sizing: border-box !important
}

.video-holder {
  background
: #1b1b1b;
  padding
: 10px
}

.centered {
  width
: 100%
}

#video {
  border
-radius: 8px
}

.video-holder .vjs-big-play-button {
  left
: 50%;
  width
: 100px;
  margin
-left: -50px;
  height
: 80px;
  top
: 50%;
  margin
-top: -40px
}


/* CUSTOM BUTTONS */
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font
-family: FontAwesome;
  font
-weight: normal;
  font
-style: normal;
  display
: inline-block;
  text
-decoration: inherit;
}
.icon-angle-left:before {
    content
: "\f104";
}
.icon-angle-right:before {
    content
: "\f105";
}

.video-js .icon-angle-right, .video-js .icon-angle-left {
    cursor
: pointer;
   
-webkit-box-flex: none;
   
-moz-box-flex: none;
   
-webkit-flex: none;
   
-ms-flex: none;
    flex
: none;
}

/*
Video.js Controls Style Overrides
.vjs-default-skin .vjs-progress-control,
.vjs-default-skin .vjs-fullscreen-control {
    display: none;  
}*/



/*.playlist-components {
    height: 264px;
    width: 40%;
    padding: 0 0 0 10px
}
.video-js, .playlist-components {
    display: inline-block;
    margin-right: -4px;
    vertical-align: top;
}
.button-holder {
    padding: 10px;
    height: 36px;
}

.playlist {
    height: 264px;
    width: 100%;
    overflow-y: auto;
    color: #c0c0c0;
    border-radius: 8px;
    display: block;
    margin: -2px 0 0 0;
    padding: 0;
    position: relative;
    background: -moz-linear-gradient(top,#000 0,#212121 19%,#212121 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#000),color-stop(19%,#212121),color-stop(100%,#212121));
    background: -o-linear-gradient(top,#000 0,#212121 19%,#212121 100%);
    background: -ms-linear-gradient(top,#000 0,#212121 19%,#212121 100%);
    background: linear-gradient(to bottom,#000 0,#212121 19%,#212121 100%);
    box-shadow: 0 1px 1px #1a1a1a inset,0px 1px 1px #454545;
    border: 1px solid #1a1a18;
}
#next {float: right}
#prev {float: left}
#prev, #next {
    cursor: pointer;
    color: white;
    text-transform: uppercase;
    font-size: 12px;
}

.playlist ul {
    padding: 0;
    margin: 0;
    list-style: none
}
.playlist ul li {
    padding: 10px;
    border-bottom: 1px solid #191919;
    cursor: pointer
}
.playlist ul li.active {
    background-color: #4f4f4f;
    border-color: #4f4f4f;
    color: white;
}
.playlist ul li:hover {
    border-color: #353535;
    background: #353535;
}
.playlist .poster, .playlist .title  {
    display: inline-block;
    vertical-align: top
}
.playlist .number {padding-right: 10px; display: none}
.playlist .poster {display: none}
.playlist .title {padding-left: 0}*\

          }
</style>
Link to comment
Share on other sites

  • Answers 0
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...