当前位置： 文江博客话题详情

JW Player 嵌入代码存在问题 - 带 HTML5 后备功能的 Flash

发布于 2024-12-02 21:35:02 字数 2004 浏览 1 评论 0原文

我正在尝试设置我的页面来播放具有以下规格的视频：

  • 使用获得许可的 JW 播放器
  • Flash 播放器，HTML5 回退
  • 我还想为 HTML5 回退提供替代文件格式（ogg、webm）
  • 使用通过 cloudfront 传输视频的 RTMP 流方法

这是我的测试页面的链接： http://coachesmarketingcenter.com/test_new_ppts/index3.html

这是我的嵌入代码目前使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test New Videos</title>

    <script type='text/javascript' src='http://coachesmarketingcenter.com/test_new_ppts/swfobject.js'></script>

    <script type="text/javascript" src="http://coachesmarketingcenter.com/test_new_ppts/jwplayer.js"></script> 

</head>
<body>

    <div id="container1"></div>

    <script type="text/javascript">
        jwplayer("container1").setup({
            file: "TestNewVideos/MyNewVideo.mp4",
            provider: "rtmp",
            streamer: "rtmp://s2cr83yb7q2jav.cloudfront.net/cfx/st",
            width: 640,
            height: 480,
            modes: [{
                type: "flash",
                src: "http://coachesmarketingcenter.com/test_new_ppts/player.swf"
            },{
                type: "html5",
                config: {
                    file: "http://dn9lu4lqda9r4.cloudfront.net/TestNewVideos/MyNewVideo.mp4",
                    provider: "video"
                }
            levels: [
                { file: "http://dn9lu4lqda9r4.cloudfront.net/TestNewVideos/MyNewVideo.mp4" },    // H.264 version
                { file: "http://dn9lu4lqda9r4.cloudfront.net/TestNewVideos/MyNewVideo.ogg" },    // Ogg Theora version
            ]
        });
    </script>

</body>
</html>
原文

I'm trying to setup my page to play a video with the following specs:

  • Use licensed JW player
  • Flash player to be used, HTML5 fall back
  • I'd also like to provide alternative file formats for the HTML5 fallback (ogg, webm)
  • Use the RTMP streaming method to deliver the videos via cloudfront

Here is a link to my test page:
http://coachesmarketingcenter.com/test_new_ppts/index3.html

Here is the embed code I'm currently using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test New Videos</title>

    <script type='text/javascript' src='http://coachesmarketingcenter.com/test_new_ppts/swfobject.js'></script>

    <script type="text/javascript" src="http://coachesmarketingcenter.com/test_new_ppts/jwplayer.js"></script> 

</head>
<body>

    <div id="container1"></div>

    <script type="text/javascript">
        jwplayer("container1").setup({
            file: "TestNewVideos/MyNewVideo.mp4",
            provider: "rtmp",
            streamer: "rtmp://s2cr83yb7q2jav.cloudfront.net/cfx/st",
            width: 640,
            height: 480,
            modes: [{
                type: "flash",
                src: "http://coachesmarketingcenter.com/test_new_ppts/player.swf"
            },{
                type: "html5",
                config: {
                    file: "http://dn9lu4lqda9r4.cloudfront.net/TestNewVideos/MyNewVideo.mp4",
                    provider: "video"
                }
            levels: [
                { file: "http://dn9lu4lqda9r4.cloudfront.net/TestNewVideos/MyNewVideo.mp4" },    // H.264 version
                { file: "http://dn9lu4lqda9r4.cloudfront.net/TestNewVideos/MyNewVideo.ogg" },    // Ogg Theora version
            ]
        });
    </script>

</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

有深☉意 2024-12-09 21:35:02

我当前正在使用的代码：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<header>
<title>PramCrazyPlayer</title>
<link href="https://pramcrazyplayer.000webhostapp.com/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<meta property="og:type" content="video">
<meta property="og:video:type" content="video/mp4">
<meta name="robots" content="noindex" />
<META NAME="GOOGLEBOT" CONTENT="NOINDEX" />
<meta property="og:title" content="ไม่พบชื่อที่แน่ชัดของวีดีโอ">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<div id="myVideo"><img src="https://1.bp.blogspot.com/-C5k7c4cF2S4/XAzihgl3s3I/AAAAAAAABdE/9yclPt2hKaU_sgimTCeOW12W4uuZBrTAQCLcBGAs/s1600/error.gif" width="100%"></div>
    <script type="text/javascript" src="https://cdn.jwplayer.com/libraries/jwplayer.js"></script>
  <style type="text/css">

  .jw-svg-icon-play path {
      display: none;
  }
  .jw-svg-icon-play {
      background-image: url('https://visualpharm.com/assets/54/Play-595b40b65ba036ed117d4529.svg');
      background-size: contain;
      background-repeat: no-repeat;
  }

  .jw-svg-icon-buffer path {
      display: none;
  }

  .jw-svg-icon-buffer {
      background-image: url('http://www.henghengled.com/img/layout/spinner.gif');
      background-size: contain;
      background-repeat: no-repeat;
  }

  .jw-svg-icon-replay path {
      display: none;
  }

  .jw-svg-icon-replay {
      background-image: url('https://visualpharm.com/assets/922/Repeat-595b40b65ba036ed117d4560.svg');
      background-size: contain;
      background-repeat: no-repeat;
  }

  .jw-svg-icon-pause path {
      display: none;
  }

  .jw-svg-icon-pause {
      background-image: url('https://visualpharm.com/assets/327/Pause-595b40b65ba036ed117d4512.svg');
      background-size: contain;
      background-repeat: no-repeat;
  }

  .jw-svg-icon-rewind path {
      display: none;
  }

  .jw-svg-icon-rewind {
      background-image: url('https://visualpharm.com/assets/151/Rewind-595b40b65ba036ed117d456b.svg');
      background-size: contain;
      background-repeat: no-repeat;
  }

  .jw-svg-icon-stop path {
      display: none;
  }

  .jw-svg-icon-stop {
      background-image: url('https://visualpharm.com/assets/891/Stop-595b40b65ba036ed117d45cc.svg');
      background-size: contain;
      background-repeat: no-repeat;
  }

</style>
</header>
<body>
<div class="container">
<script type="text/javascript">
    var playerInstance = jwplayer("myVideo");
        playerInstance.setup({
        sources: [{"label":"1080p","type":"video/mp4","file":"myvideo.mp4"},
                  {"label":"720p","type":"video/mp4","file":"myvideo.mp4"},
                  {"label":"480p","type":"video/mp4","file":"myvideo.mp4"},
                  {"label":"360p","type":"video/mp4","file":"myvideo.mp4"},
                  {"label":"270p","type":"video/mp4","file":"myvideo.mp4"},
                  {"label":"144p","type":"video/mp4","file":"myvideo.mp4"},
                  ]
,
        controls: true,
        title: "ไม่พบชื่อที่แน่ชัดของวีดีโอ",
        image: 'https://pramcrazyplayer.000webhostapp.com/bg-04.jpg',
        width: "100%",
        height: "100%",
        aspectratio: "16:9",
        fullscreen: "true",
        primary: 'html5',
        hlshtml: false,
        autostart: false,
        mute: false,

        });
    </script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-64601221-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-64601221-1');
</script>
</html>
</html>

code I'm currently using:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<header>
<title>PramCrazyPlayer</title>
<link href="https://pramcrazyplayer.000webhostapp.com/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<meta property="og:type" content="video">
<meta property="og:video:type" content="video/mp4">
<meta name="robots" content="noindex" />
<META NAME="GOOGLEBOT" CONTENT="NOINDEX" />
<meta property="og:title" content="ไม่พบชื่อที่แน่ชัดของวีดีโอ">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<div id="myVideo"><img src="https://1.bp.blogspot.com/-C5k7c4cF2S4/XAzihgl3s3I/AAAAAAAABdE/9yclPt2hKaU_sgimTCeOW12W4uuZBrTAQCLcBGAs/s1600/error.gif" width="100%"></div>
    <script type="text/javascript" src="https://cdn.jwplayer.com/libraries/jwplayer.js"></script>
  <style type="text/css">

  .jw-svg-icon-play path {
      display: none;
  }
  .jw-svg-icon-play {
      background-image: url('https://visualpharm.com/assets/54/Play-595b40b65ba036ed117d4529.svg');
      background-size: contain;
      background-repeat: no-repeat;
  }

  .jw-svg-icon-buffer path {
      display: none;
  }

  .jw-svg-icon-buffer {
      background-image: url('http://www.henghengled.com/img/layout/spinner.gif');
      background-size: contain;
      background-repeat: no-repeat;
  }

  .jw-svg-icon-replay path {
      display: none;
  }

  .jw-svg-icon-replay {
      background-image: url('https://visualpharm.com/assets/922/Repeat-595b40b65ba036ed117d4560.svg');
      background-size: contain;
      background-repeat: no-repeat;
  }

  .jw-svg-icon-pause path {
      display: none;
  }

  .jw-svg-icon-pause {
      background-image: url('https://visualpharm.com/assets/327/Pause-595b40b65ba036ed117d4512.svg');
      background-size: contain;
      background-repeat: no-repeat;
  }

  .jw-svg-icon-rewind path {
      display: none;
  }

  .jw-svg-icon-rewind {
      background-image: url('https://visualpharm.com/assets/151/Rewind-595b40b65ba036ed117d456b.svg');
      background-size: contain;
      background-repeat: no-repeat;
  }

  .jw-svg-icon-stop path {
      display: none;
  }

  .jw-svg-icon-stop {
      background-image: url('https://visualpharm.com/assets/891/Stop-595b40b65ba036ed117d45cc.svg');
      background-size: contain;
      background-repeat: no-repeat;
  }

</style>
</header>
<body>
<div class="container">
<script type="text/javascript">
    var playerInstance = jwplayer("myVideo");
        playerInstance.setup({
        sources: [{"label":"1080p","type":"video/mp4","file":"myvideo.mp4"},
                  {"label":"720p","type":"video/mp4","file":"myvideo.mp4"},
                  {"label":"480p","type":"video/mp4","file":"myvideo.mp4"},
                  {"label":"360p","type":"video/mp4","file":"myvideo.mp4"},
                  {"label":"270p","type":"video/mp4","file":"myvideo.mp4"},
                  {"label":"144p","type":"video/mp4","file":"myvideo.mp4"},
                  ]
,
        controls: true,
        title: "ไม่พบชื่อที่แน่ชัดของวีดีโอ",
        image: 'https://pramcrazyplayer.000webhostapp.com/bg-04.jpg',
        width: "100%",
        height: "100%",
        aspectratio: "16:9",
        fullscreen: "true",
        primary: 'html5',
        hlshtml: false,
        autostart: false,
        mute: false,

        });
    </script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-64601221-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-64601221-1');
</script>
</html>
</html>
回复 原文
~没有更多了~

关于作者

黑白记忆

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

浪漫人生路

文章 0 评论 0

620vip

文章 0 评论 0

羞稚

文章 0 评论 0

走过海棠暮

文章 0 评论 0

你好刘可爱

文章 0 评论 0

陌若浮生

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文