<!DOCTYPE html>
<html lang="en">
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.0.2/video.js"></script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
<track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'
style='width: 100%;height: auto'>
<source id="source" src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</source>
</video>
<script>
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
playbackRates: [0.5,1,1.5,2,3],
})
myVideo.play();
//下面这种方式
//videoUrl播放视频地址
//videoPic 展示图
var myPlayer = videojs("my-video");
myPlayer.poster(videoPic);
myPlayer.src(videoUrl);
myPlayer.play();
videojs("my-video").ready(function () {
var myPlayer = this;
myPlayer.play();
//此处为断点播放,传入上次播放时间继续上次的播放
myPlayer.currentTime(parseFloat(currPosition / 1000));
});
</script>
</body>
</html>
这篇博客展示了如何使用video.js插件来创建和控制HTML5视频播放器。通过引入video.js的相关库,配置video标签,添加不同格式的视频源,并提供了设置播放、暂停、断点续播等功能的JavaScript代码示例。
1040

被折叠的 条评论
为什么被折叠?



