Giter VIP home page Giter VIP logo

Comments (3)

rafa8626 avatar rafa8626 commented on May 14, 2024

@rob030 If you are using the latest version you should use:

player = new MediaElementPlayer('videoPlayer');

because your code has a typo.
This is the code I tried and worked for me (FYI, you don't need jQuery for the player anymore):

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../build/mediaelementplayer.css" />
    <script src="../build/mediaelement-and-player.js"></script>`
    <script type="text/javascript">
	    // global for movie player
	    var player;
	    document.addEventListener('DOMContentLoaded', function() {
		    player = new MediaElementPlayer('videoPlayer');
	    });
	    function ChangeVideo(vid) {
		    var newSrc = '';
		    switch (vid) {
			    case 1:
				    newSrc = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4';
				    break;
			    case 2:
				    newSrc = 'https://media.w3.org/2010/05/sintel/trailer.mp4';
				    break;
			    case 3:
				    newSrc = 'https://www.youtube.com/watch?v=twYp6W6vt2U';
				    break;
		    }
		    player.setSrc(newSrc);
		    player.load();
		    player.play();
		    return false;
	    }
    </script>
</head>
<body>
<div style="width: 800px;height:600px">
<video id="videoPlayer" style="width:100%; height:100%;" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="100%" height="100%"></video>
</div>
<a href="#" onclick="return ChangeVideo(1)">video 1</a><br />
<a href="#" onclick="return ChangeVideo(2)">video 2</a><br />
<a href="#" onclick="return ChangeVideo(3)">video 3</a>
</body>
</html>

Let me know if it works for you and please star both https://github.com/mediaelement/mediaelement and https://github.com/mediaelement/mediaelement-plugins to continue improving the package and giving it more popularity; also tell your friends/coworkers/etc. that have a GitHub account to do the same to support the project, if you don't mind. It would be greatly appreciated it.

from mediaelement-plugins.

rob030 avatar rob030 commented on May 14, 2024

Hi Rafael,
That works very well. Days and days I have spent trying to sort this and the demo. You are a star. Thankyou very very much.
I really appreciate it.
Will definitely be starring both. When I have finished my project and all works well, mediaelement will be getting alot of publicity. I always use mediaelement for any websites that I built that require video.
Again, thanks Rafael
Cheers
Rob

from mediaelement-plugins.

rafa8626 avatar rafa8626 commented on May 14, 2024

Great. We really want more people to star the project. We don't ask for anything but that. If you can help us with that, that would be awesome. It is good to know that this worked for you. :)

from mediaelement-plugins.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.