Question

我正在尝试通过videojs传输HLS媒体，但它无法正常工作。

我知道桌面浏览器不支持HLS，但它不能在android / ios设备上运行......

我收到错误消息：未找到此视频的兼容来源

任何人都可以查看我的代码，发现任何错误吗？

Streams正在我的本地服务器上运行，使用VLC进行测试，因此问题必须出现在我的videojs配置上。

 <!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link href="http://belelros.github.io/videojs-playLists/css/main.css" rel="stylesheet">
    <link href="http://belelros.github.io/videojs-playLists/css/normalize.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
    <link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/4.9/video.js"></script>
    <script src="https://rawgithub.com/Belelros/videojs-playLists/master/lib/videojs-playlists.js" data-cover></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="main.js"></script>

</head>
    <div class="video-holder centered">

        <video id="video" class="video-js vjs-default-skin"
               controls preload="auto" width="640" height="640"
               data-setup=''
               poster="">
        </video>

        <div class="playlist-components">
<script>
     var videos = [
        {
          src : [
            'http://192.168.1.165/streamtest1.m3u8'
          ],
          poster : 'images/bbc_news.png',
          title : 'BBC WORLD NEWS'
        },
        {
          src : [
            'http://192.168.1.165/streamtest2.m3u8'
          ],
          poster : 'images/al_jazeera_english.png',
          title : 'AL JAZEERA'
        },
        {
          src : [
            'http://192.168.1.165/streamtest3.m3u8'
          ],
          poster : 'images/viasat_explore.png',
          title : 'Viasat Explore'
        }
      ];
</script>

            <div class="playlist">
                <ul></ul>
            </div>
        </div>
    </div>


</body>
</html>

我正在使用videojs的播放列表插件 https://github.com/jgallen23/videojs-playLists

也许我应该在某处定义视频类型？

Answer 1

我修复了它，将m3u8扩展名添加到videojs-playlist.js

  player.pl._guessVideoType = function(video){
var videoTypes = {
  'webm' : 'video/webm',
  'mp4' : 'video/mp4',
  'm3u8' : 'application/x-mpegURL',
  'ogv' : 'video/ogg'
};

Answer 2

请使用以下

添加hls支持

self

或包括CDN的videojs-contrib-hls.js。

<Controls:MetroWindow x:Class="StyledWindow"
                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls">
  <Window.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml"/>
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml"/>
        <!-- Accent and AppTheme setting -->
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml"/>
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Window.Resources>

  <Grid>
  </Grid>
</Controls:MetroWindow>

Videojs HLS无法正常工作

2 个答案: