JW Player 嵌入代码的问题 - 带有 HTML5 后备的 Flash
Posted
技术标签:
【中文标题】JW Player 嵌入代码的问题 - 带有 HTML5 后备的 Flash【英文标题】：Problem with JW Player Embed Code - Flash with HTML5 Fallback 【发布时间】：2011-11-07 23:57:37 【问题描述】：我正在尝试设置我的页面以播放具有以下规格的视频：
使用授权的 JW 播放器 要使用 Flash 播放器，html5 回退 我还想为 HTML5 后备（ogg、webm）提供替代文件格式 使用 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>
【问题讨论】：
不确定是什么问题 - 对我来说似乎可行？ 您的视频文件似乎无效。尝试使用其他链接。 【参考方案1】：我目前正在使用的代码：
<!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" ></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>
【讨论】：
以上是关于JW Player 嵌入代码的问题 - 带有 HTML5 后备的 Flash的主要内容，如果未能解决你的问题，请参考以下文章