Multiple HTML5 Videos – One player – Dreamweaver CS6

I have 15 videos mp4 loaded on my website.
On the main webpage, at the top of the page, will be 15 links.
Under the links will be a video player embedded into the page.
I was thinking at HTML5 video.
I watched several tutorials on internet how to do that in Adobe Dreamweaver for one video.
I think I understood how to do that for one video.

My question is: how to load a specific video from those 15 when the corresponding text link on the top of the page is clicked?
What about play (automatic loop or manual) next video from the given list?

As I have read so far seems that HTML5 alone cannot do that, but JavaScript is needed.
If it is like that, can you provide an example?
LVL 21
viki2000Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
My suggestion is to start looking at video.js:

http://www.videojs.com/

It is a JavaScript framework for HTML5 video.
0
viki2000Author Commented:
Of course I knew about that before I asked here, but was not enough for me. Actually I have/found more info on different other websites, but I wanted a clear example from the experts here. For example next page explains more and gives an example very close to what I wanted:
http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_Embedding

Additional to what is explained in the above link I want to make a 3D carousel and when an image in the a carousel  is clicked then a video window player should pop up and play a corresponding video.
0
dgrafxCommented:
viki
I prefer MediaElement JS - download here: http://mediaelementjs.com/
It allows viewers to view your videos even if their browser doesn't support .mp4 files.
Works for other file types as well.

Anyway - below is how to do a playlist as you speak of by loading the player with a video from a link.
I like your carousel idea but let's do one thing at a time ...

First add your jquery file
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

Then in the media element download - find the mediaelement-and-player.js file and place in your test website.
Then code the location to it here
<script src="mediaelement-and-player.js"></script>

Then code your links below with some videos
<a href="" src="video1.mp4" type="video/mp4" class="vidlink">Video1</a>
<a href="" src="video2.mp4" type="video/mp4" class="vidlink">Video2</a>
<a href="" src="video3.mp4" type="video/mp4" class="vidlink">Video3</a>
<br /><br />

<video id="xplayer" controls></video>

<script>
$(function () {

      var player = new MediaElementPlayer('#xplayer', {
          type: 'video/mp4',
          success: function (mediaElement, domObject) {
          }
      });
      $('.vidlink').on('click', function() {
            filename = [{src: $(this).attr('src'), type: $(this).attr('type')}];
            player.setSrc(filename);
            player.load();
            player.play();
            event.preventDefault();
      });
      
});
</script>

And that's how you do a playlist type of thing ...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

viki2000Author Commented:
I will definitely try to implement „MediaElement JS“.
During the next days, when I will have time between other tasks, I will try to use the suggested code above. What I do now is a second task, more for personal interest.
In mean time I activated online the website with a carousel done in flash just to see how is working. I will modify/arrange a bit the main page later, maybe adding background sound.
Here is the website: http://magnificent-romania.com/

Right now the videos are opening in a new tab when a picture is clicked.
I tested in Firefox, Chrome, Opera, IE. It is not working on IOS IPhone and IPad for the moment.
The carousel is done with “Aleo 3D Flash Slideshow Creator” http://aleosoft.com/flash3dslideshow/index.html

Other carousels that I found on internet are for example:
http://www.flshow.net/carousel/fullpage.html
www.flashxml.net/3d-carousel-menu.html
http://www.flashxml.net/3d-carousel-menu-as3.html
http://flashotaku.com/components/carousel/examples/
Then also:
http://codecanyon.net/item/ultimate-3d-carousel/6651900
http://codecanyon.net/item/codingjacks-3d-carousel/2958101
http://www.starplugins.com/killercarousel

I know Dreamweaver CC has under Bootstrap Components – Carousel, but I do not know if can be configured 3D or just a simple photo slideshow and how easy is to work with it and how many options are to set it compared with the above flash types.
Probably will be better if it is not pure flash. Some of the options from links above seem to work also on mobile devices.
I do not know if HTML5 + CSS + JavaScript can be used easy to makes such 3D carousel and to get rid of flash.

Coming back to the initial question, I was thinking that the carousel to be as big as possible, maybe in centre of the carousel I will add the flag of Romania as gif picture, then the videos to be played as follows:
- When I click a picture from carousel to open in full screen the player in the same main page.
- The player should have a big button on it, something as “RETURN” or “BACK” and when is pushed to have the video minimized, maybe under carousel in an embedded player. I know that most of the players have in the right bottom side the “full screen/minimize” option, but I would like an additional big button for that.
- The same action as above should take place when the video ends.
- When the video is minimized should pause or continue in case did not finish – I did not decide yet – that is a small detail.
With these being said I think I must start to implement the  „MediaElement JS“ player as you described above with a video list and embedded under carousel as first step.
The problem that I see now is click on picture event – which is set in flash carousel as a link to the video file – versus the link of the video in the list code mentioned above.
0
dgrafxCommented:
I believe that the first step in the carousel is to remove flash and implement an html5 version.
Here is a link to some Google search results - didn't know if you want free or paid but am sure you can find free if you look through the results.
https://www.google.com/?gws_rd=ssl#newwindow=1&q=carousel+html5+example
0
viki2000Author Commented:
Removing the flash carousel and implementing an html5 version was the 1st thing that crossed to my mind too, but I thought there is somehow a chance to interface the flash with code above in order to implement the video list played in one embedded video player.
A Google search link??? That is for my grandma.
Do you know at least a specific example somewhere on internet which can do in HTML5 similar as my existing flash carousel and can be then attached to the code proposed by you above? I mean, I can dig by myself too in internet, but I believed in some help to filter the Google search results.
Of course free versions are always welcome and the 1st option, but if is not free and costs only few bucks I do not mind if will do the job that I have in mind.
0
dgrafxCommented:
And your Grandma isn't willing to help I take it ...

All I did was search to find 3d carousels then looked at a couple.
I would have expected that you'd do the same to find one that suited your tastes.
Then when you find one we can give advice on code.

Maybe you could reread your original question - the one about how to load a video into an html5 player from clicking a link!

Good luck ...
0
viki2000Author Commented:
Thank you very much for your help.
Actually your answer is good indeed.
Sorry for my grandmas, both are dead since long time. Was wrong form my side to ask too much aside to the question in title, but recommending a google search is helpful only when someone does not know the key words for search, which was not the case.
As soon as I will do something with the HTML carousel and I have some news I will update here with a link for a new question.
Now I will close the present question.
And the prize goes to dgrafx!
0
viki2000Author Commented:
P.S. It seems another solution using my flash 3d carousel is a combination with HTML5 Lightbox, but not so cheap:
http://aleosoft.com/flashtutorial_lightbox_image_video.html
https://html5box.com/html5lightbox/index.php
0
dgrafxCommented:
Ok great!
I'm glad my code helped ...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.