Newbie seeking to run Wowza with Video.js

Wowza Streaming Engine
1

Greetings:

I am new to developing applications with Wowza, and am trying to get it to stream the sample video that is on the server using Video,js. I chose to use Video.js because most of the other options provided in the test program only seem to work on Firefox (they depend on Flash, which seems to be failing to operate on just about every other browser!). I would like to use Video.js 7 to overcome this problem.

In my attempt to use Video.js, I pointed it to the following source:

<source src='http://[my-ip-address]:1935/vod/mp4:sample.mp4/manifest.mpd' type='video/mp4'>

which also happens to be the same source pointed to by the test program provided on the Wowza manager for DASH streaming. I do not know the proper URL for accessing other stream types.

NOTE: According to the test program, HLS and HDS are not supported on Firefox or Chrome. This appears to be an inaccuracy since the latest versions of both browsers claim to support them. Unfortunately, the test program gives no idea of the proper URL for those stream types.

What appears to happen is that under Firefox and Chrome, Video.js seems to find the file, but it gets stuck on a blank black screen with a spinning “loading” graphic. The video does not play.

This seems to happen with the test program, as well – except on Firefox where the Flash plugin works.

There is a lot I do not know, and I cannot find the appropriate documentation for setting up Wowza to work with DASH, HLS, or HDS. Could someone please either tell me the proper setup or configuration or point me to the documentation for using video.js with Wowza to stream HLS, HDS, and DASH?

2

You should be able to use the following two pages as a starting point.

https://videojs.github.io/videojs-contrib-hls/
https://videojs.com/getting-started/#customize

The information below should get you started with delivering the sample.mp4 file as an HLS stream to both Firefox and Chrome.

<head>
  <link href="https://vjs.zencdn.net/7.6.0/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video id='my-video' class='video-js' controls preload='auto' width='512' height='288'
  poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
    <source src='http://localhost:1935/vod/sample.mp4/playlist.m3u8' type="application/x-mpegURL">
    <p class='vjs-no-js'>
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
    </p>
  </video>

  <script src='https://vjs.zencdn.net/7.6.0/video.js'></script>
</body>
1 Like
3

Just a change in suffix and MIME type? Cool!

That did it. Thanks.