我尝试了 3 个选项
<!-- Flowplayer depends on jquery -->
<script src="jquery.min.js"></script>
<!-- Flowplayer-->
<script src="flowplayer.min.js"></script>
<script>
// global configuration (optional)
flowplayer.conf = {
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
swf: "flowplayer.swf"
};
// force flash with query - only for testing, do not use this switch in production!
if (/flash/.test(location.search)) flowplayer.conf.engine = "flash";
flowplayer.conf.ratio = 0.417;
// bind listeners to all players on the page
flowplayer(function (api, root) {
// when a new video is about to be loaded
api.bind("load", function () {
//console.info("load", api.engine);
// when a video is loaded and ready to play
}).bind("ready", function () {
//console.info("ready", api.video.duration)
});
});
$(document).ready(function () {
try {
// #1
flowplayer().play("http://stream.flowplayer.org/bauhaus/624x260.mp4");
//#2
//flowplayer().load([{ mp4: "http://stream.flowplayer.org/bauhaus/624x260.mp4" }]).resume();
// #3
//var api = flowplayer();
//api.load("http://stream.flowplayer.org/bauhaus/624x260.mp4", function () {
// api.resume();
//});
} catch (e) {
alert(e.message);
}
});
</script>
HTML
<!-- first player -->
<div class="flowplayer ">
<video preload='none'>
<source type="video/webm" src="http://stream.flowplayer.org/bauhaus/624x260.webm" />
<source type="video/mp4" src="http://stream.flowplayer.org/bauhaus/624x260.mp4" />
<source type="video/ogg" src="http://stream.flowplayer.org/bauhaus/624x260.ogv" />
<!-- <source type="video/flash" src="mp4:bauhaus/624x260.mp4" />-->
</video>
</div>