在尝试调用jwplayer的setup方法或bootstraps carousel方法时,我一直得到一个Object没有方法错误。
我确实安装了JQuery并且它正常工作,我也可以使用数据属性从引导程序中使用JS,而常规jQuery只能使用这两个。
这是一个小提琴http://jsfiddle.net/S9jDw/
我已经坚持了好几天。
这是我的js代码
$(document).ready(function() {
jwplayer('.jw-wrapper').setup({
file: 'http://helpsaverosie.ca/Rosie.m4v',
image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
title: 'Rosie',
width: '100%',
aspectratio: '16:9',
mute: 'true',
autostart: 'true'
});
});
这是我的html输出
<!DOCTYPE html>
<html class='index'>
<head>
<title>Save Rosie</title>
<meta charset='utf-8'>
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<!-- Use title if it's in the page YAML frontmatter -->
<link href="/stylesheets/fonts.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/bootstrap.js" type="text/javascript"></script>
<script src="http://jwpsrv.com/library/Xp3HoLIEEeOyYSIACmOLpg.js" type="text/javascript"></script>
<script src="/javascripts/all.js" type="text/javascript"></script>
<link href='https://s3-us-west-2.amazonaws.com/rosiesdonations/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<script src=''></script>
</head>
<body>
<div class='wrapper'>
<div id='image-wrapper'>
<aside class='left-side-image'>
<img alt='Side Image Left' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie_Left.gif'>
</aside>
<aside class='right-side-image'>
<img alt='Right Side Image' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie_Right.png'>
</aside>
</div>
<div class='container'>
<nav class='row main-header'>
<header class='col-md-12'>
<h1>Help Save Rosie</h1>
</header>
</nav>
<section class='row main-body'>
<div class='col-md-12'>
<div class='jw-wrapper'></div>
<div class='carousel slide' data-ride='carousel' id='main-carousel'>
<div class='carousel-inner'>
<div class='item active'>
<img alt='Rosie Picture one' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie1.png'>
</div>
<div class='item'>
<img alt='Rosie Picture two' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie2.jpg'>
</div>
<div class='item'>
<img alt='Rosie Picture three' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie3.jpg'>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
看起来jwplayer实际上是期望元素的id而不是选择器。
尝试将class="jw-wrapper"
更改为id="jw-wrapper"
并将您的设置方法更改为:
$(document).ready(function() {
jwplayer('jw-wrapper').setup({
file: 'http://helpsaverosie.ca/Rosie.m4v',
image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
title: 'Rosie',
width: '100%',
aspectratio: '16:9',
mute: 'true',
autostart: 'true'
});
});