Brightcove视频播放器与自定义轮播幻灯片

时间：2017-08-17 10:54:27

标签： javascript jquery html css brightcove

Sample Design -我想用prev和下一个箭头幻灯片以及垂直旋转木马缩略图幻灯片创建视频轮播，我可以创建带缩略图的视频，但无法找到prev和next arrow的选项。请帮帮我。这里的示例代码。

提前致谢，

.template-container{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    margin: 0;
    /*background-color: #1a1a1a;*/
    overflow-y: hidden;
}
.video-js {
    height: 430px;
    width: 710px;
    float: left;
    margin-right: 50px;
}
.myplayer {
    width: 70%;
    position: relative;
}
.playlist-wrapper {
    width: 31%;
    height: 100%;
    overflow-x: scroll;
}

.vjs-playlist .vjs-playlist-item {
    min-height: 130px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
}
.vjs-playlist-item.vjs-selected {
    background: rgb(89, 44, 54);
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
    white-space: normal;
    min-height: 99px;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail {
    height: 68px;
    font-size: 13px;
    margin-right: 17px;
    width: 121px;
}
.vjs-mouse.vjs-playlist {
    color: #000000; /* darker blue */
    background-color: #fff; /* gray */
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
      color: #466675; /* darker blue */
}
li.vjs-playlist-item {
      background-color: #ffffff; /* lighter blue */
}
li.vjs-playlist-item.vjs-selected {
    background-color: #FAC8BF; /* pink */
}
/*PLuggin Customiozed code*/
.vjs-playlist{
    font-family:"CernLight", Helvetica, Arial,Serif;
}
.vjs-playlist .vjs-selected, .vjs-playlist.vjs-mouse .vjs-selected {
    background-color: #e5e5e5;
}
.vjs-mouse.vjs-playlist .vjs-playlist-title-container{
    text-shadow: none;
}
.vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
    opacity: 1;
}
.vjs-playlist img, .vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
    margin-left: 12px;
    margin-top: 40px;
}
.vjs-playlist img {
    min-height: 77px;
}
.vjs-playlist-title-container{
    top: 0px;
}
.vjs-playlist .vjs-playlist-name{
    font-size: 18px;
}
.vjs-playlist-duration, .vjs-mouse.vjs-playlist .vjs-up-next .vjs-up-next-text{
    display: none;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail .vjs-playlist-now-playing-text{
    top: 40px;
    left: 12px
}
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Video Carousel</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css">

    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/videojs-bc-playlist-ui.css">
    <link rel="stylesheet" href="css/hi-videocarousel.css" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <style>
.template-container{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    margin: 0;
    /*background-color: #1a1a1a;*/
    overflow-y: hidden;
}
.video-js {
    height: 430px;
    width: 710px;
    float: left;
    margin-right: 50px;
}
.myplayer {
    width: 70%;
    position: relative;
}
.playlist-wrapper {
    width: 31%;
    height: 100%;
    overflow-x: scroll;
}

.vjs-playlist .vjs-playlist-item {
    min-height: 130px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
}
.vjs-playlist-item.vjs-selected {
    background: rgb(89, 44, 54);
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
    white-space: normal;
    min-height: 99px;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail {
    height: 68px;
    font-size: 13px;
    margin-right: 17px;
    width: 121px;
}
.vjs-mouse.vjs-playlist {
    color: #000000; /* darker blue */
    background-color: #fff; /* gray */
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
      color: #466675; /* darker blue */
}
li.vjs-playlist-item {
      background-color: #ffffff; /* lighter blue */
}
li.vjs-playlist-item.vjs-selected {
    background-color: #FAC8BF; /* pink */
}
/*PLuggin Customiozed code*/
.vjs-playlist{
    font-family:"CernLight", Helvetica, Arial,Serif;
}
.vjs-playlist .vjs-selected, .vjs-playlist.vjs-mouse .vjs-selected {
    background-color: #e5e5e5;
}
.vjs-mouse.vjs-playlist .vjs-playlist-title-container{
    text-shadow: none;
}
.vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
    opacity: 1;
}
.vjs-playlist img, .vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
    margin-left: 12px;
    margin-top: 40px;
}
.vjs-playlist img {
    min-height: 77px;
}
.vjs-playlist-title-container{
    top: 0px;
}
.vjs-playlist .vjs-playlist-name{
    font-size: 18px;
}
.vjs-playlist-duration, .vjs-mouse.vjs-playlist .vjs-up-next .vjs-up-next-text{
    display: none;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail .vjs-playlist-now-playing-text{
    top: 40px;
    left: 12px
}
    </style>
</head>

<body>
	<section>
		<div class="template-container" style="background-color: ">
				<div class="container">
					<div class="col-lg-12 col-md-12 col-sm-12">						
						<div class="template-container">

                            <!-- ###################Modal popup Code to implement in the componenet starts Here-->
                            
                            <div class="myplayer">
                            <h2 class="text-center">Video</h2>
                            <div id="carousel-outer-container">
                                <div id="feature-carousel-container" class="well well-small">
                                    <div id="feature-carousel" class="carousel"></div>
                                    <div id="carousel-left">
                                        <img src="http://solutions.brightcove.com/bcls/scripts/jQuery-Feature-Carousel/images/arrow-left.png" />
                                    </div>
                                    <div id="carousel-right">
                                        <img src="http://solutions.brightcove.com/bcls/scripts/jQuery-Feature-Carousel/images/arrow-right.png" />
                                    </div>
                                </div>
                            </div>

                             <video id="myPlayerID"
                                data-playlist-id="5455901760001"
                                data-account="1507807800001"
                                data-player="SyMOsyA-W"
                                data-embed="default"
                                data-application-id
                                class="video-js"
                                controls></video>

                                <script src="https://players.brightcove.net/1507807800001/SyMOsyA-W_default/index.min.js"></script> 

                                <script type="text/javascript">
                                  videojs('myPlayerID').ready(function(){
                                    var myPlayer = this;
                                    myPlayer.playlist.repeat(true);
                                    console.log('myPlayer.repeat()',myPlayer.playlist.repeat());
                                  }); 
                                </script>

                            </div>

                            <div class="playlist-wrapper">
                                <h4>Other Videos</h4>
                                <ol class="vjs-playlist vjs-csspointerevents vjs-mouse"></ol>
                            </div>           
                            <!-- ###################Modal popup Code Ends Here-->
						</div>						
					</div>
				</div>
		</div>
	</section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>


</body>

</html>

Prabhu Shanmugam enter code here

0 个答案:

没有答案
相关问题
最新问题