video.js插件

这篇博客展示了如何使用video.js插件来创建和控制HTML5视频播放器。通过引入video.js的相关库,配置video标签,添加不同格式的视频源,并提供了设置播放、暂停、断点续播等功能的JavaScript代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值