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?
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?
ASKER
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
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
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
ASKER
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.
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.
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 ...
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 ...
ASKER
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!
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!
ASKER
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
http://aleosoft.com/flashtutorial_lightbox_image_video.html
https://html5box.com/html5lightbox/index.php
Ok great!
I'm glad my code helped ...
I'm glad my code helped ...
http://www.videojs.com/
It is a JavaScript framework for HTML5 video.