Web网页播放器制作（videojs7）-（二）api 事件属性使用

最新推荐文章于 2024-01-17 17:26:49 发布

停止重构

最新推荐文章于 2024-01-17 17:26:49 发布

阅读量2.6k

点赞数 3

文章标签： videojs 播放器前端视频 video.js

本文链接：https://blog.csdn.net/Daniel_Leung/article/details/100835959

版权

Web网页播放器制作（videojs7）-（二）api 事件属性使用

0 引言
1 初始化播放器
2 初始化参数设置
3 相关api
- 3.1 事件监听
- 3.2 属性调用
4 后记

0 引言

前面已经讲解了如何使用videojs了，前面的使用都比较简单，一般有一定规模的网络系统都不止步于这样的需求，本章将会讲解通过js使用videojs。此博客秉承以下原则：

没有原理性介绍，我不是这个工具的作者，写了也是抄的。
没有太详细的操作步骤，操作步骤尽量指向官方文档。
没有遇到的或者不值一提的，我都不会写上去。

作者	Daniel.Leung
组织	池鱼 - YiiGaa
邮箱	YiiGaa@126.com
日期	2019-09-14

1 初始化播放器

1.1 引入第三方库

库引入，这里多引了一个jquery，个人比较习惯用jquery

   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>

1.2 HTML

html引用video标签

    <video id="id_PlayerBody" class="video-js" controls></video>

这里引用了 controls ，这个会默认显示控制栏（如进度条、音量条等），以后在需要自制控制栏时会把该属性去掉。

1.3 js

js初始化video

    var options = {};
    var player = videojs("id_PlayerBody", options);

options是需要传入的参数，和第一讲中在video标签使用data-setup='{}'是等效的。
player是video的句柄（虽然js里应该叫变量，而且在写js里说句柄怪怪的，但我还是觉得叫句柄更为准确一些），后面使用API都需要通过这个句柄调用。

1.4 设置播放资源

player.src("./12.mp4")

.12.mp4是视频路劲

1.5 常见问题

因为现在的options是空的，这里可能看不出来。但以后可能会有其他参数的时候，可能你会发现参数不起作用。那么原因很可能是在video标签引用了data-setup='{}'，这时候可以在浏览器console看一下是否有该错误。
VIDEOJS: WARN: Player “id_PlayerBody” is already initialised. Options will not be applied.
在这里插入图片描述

1.6 完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
        <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
    </head>
    <body>
        <video id="id_PlayerBody" class="video-js Player_realBody" controls >
        </video>
    </body>
    <script>
        $(document).ready(function(){
            var options = {};

            var player = videojs("id_PlayerBody", options);
            player.src("./12.mp4")
        });
    </script>
</html>

2 初始化参数设置

就是上述 var options = {};的常用参数

      var options ={
            width:1600,//宽
            height:900,//高
            controls:true,//控制栏是否显示
            preload:"none",//预加载：默认是none，'auto'|'true'|'metadata'|'none'
            poster:'封面图.jpg',//预览图
            autoplay:false,//自动播放，Chrome5以后和现在的手机播放器，都不支持自动播放了，静音情况下部分浏览器支持
            loop:true,//循环
            muted:true,//静音
            errorDisplay:false,//发生错误时，videojs是否显示错误
            sources:[//播放的源
                {
                    src:'source/test.mp4',
                    type:'video/mp4'
                }
            ],
            controlBar: {//控制栏设置
                muteToggle: false,
                volumeMenuButton:false//静音按钮
            },
            flash:{//设置flash播放器路劲
                swf:"flash播放器路劲.swf"
            },
            techOrder:["html5","flash"]//选用哪个技术优先，videojs会按照数组的先后顺序自动选择，如果数组单一为“flash”，即播放器会使用flash，而不会使用html5的播放器。
        }

其他参数请参照官方文档，我一开始也没看懂官方文档是怎么个编写逻辑，然后就图省事想找中文博客，发现找不到，最后我还是重新看官方文档了。参数说明：https://docs.videojs.com/tutorial-options.html

3 相关api

3.1 事件监听

			player.on("timeupdate", 回调函数)//视频播放进度更新通知
            player.on("pause", 回调函数)//视频暂停通知
            player.on("play", 回调函数)//视频播放通知
            player.on("playing", 回调函数)//视频正在播放事件，播放期间会定期回调
            player.on("resize", 回调函数)//
            player.on("error", 回调函数)//播放器错误回调
            player.on("loadedmetadata", 回调函数)//meta信息load完通知
            player.on("loadeddata", 回调函数)//当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件
            player.on("waiting", 回调函数)//视频加载期间会定期回调
            player.on("durationchange", 回调函数)//duration变化的通知
            player.on("progress", 回调函数)//进度变化通知
            player.on("ended", 回调函数)//播放完成通知

videojs的事件基本上和video标签的事件一致，先参考video标签的事件说明https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
如果实在是不好用，那再看官方文档吧，不过我找到的也是在说html5的，可能我没找对，欢迎矫正
https://docs.videojs.com/html5

3.2 属性调用

player.duration()//获取现在duration值
player.currentTime(xx)//设置当前播放的进度，xx为值
player.play()//播放视频，在没有事件触发（如按钮点击等）情况下，现在大多浏览器是不能播放的，部分浏览器可以支持在静音条件下有效
player.pause()//播放视频
player.videoWidth()//获取视频画面宽度
player.videoHeight()//获取视频画面高度
player.src({//设置播放路劲
        src: url,//播放路劲
        type: type//视频类型
 })
 player.poster(src)//设置封面图，src为图片路劲
 player.volume(volume)//设置音量大小，

这个videojs属性基本也和video标签差不多，先参考video标签的说明
https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
官方文档，基本上跟上面的一样，可能我没找对，欢迎矫正
https://docs.videojs.com/html5