文档首页 > > 播放器SDK> Web播放器> 初始化

初始化

分享
更新时间:2020/09/17 GMT+08:00

您可以通过以下步骤在页面中创建一个播放器。

Step1:引入js文件

  • 在页面中引入Web播放器脚本文件。
    <script src="https://media-cache.huaweicloud.com/video/hwplayer/1.4.0/dist/hwplayer.js"></script>
  • 若播放器需要支持FLV格式,请在引入“hwplayer.js”前,先引入“flv-1.4.2.min.js”文件,并在“hwplayer.js”引入中增加“flvjs=true”属性。

    若在同一个页面实现js上传和Web播放,需要注意flv.js共存导致的视频无法播放等问题。

    1
    2
    <script src="https://media-cache.huaweicloud.com/video/hwplayer/1.4.0/lib/flv-1.4.2.min.js"></script>
    <script src="https://media-cache.huaweicloud.com/video/hwplayer/1.4.0/dist/hwplayer.js?flvjs=true"></script>
    
    调用src方法更新视频源时需要加上type参数。
    1
    2
    3
    4
        hwPlayer.src({
            src: url,//视频or直播url
            type: 'video/flv'
        })
    
  • 若播放器需要支持DASH格式,请在引入“hwplayer.js”前,先引入“dash-2.9.2.all.min.js”文件,并在“hwplayer.js”引入中增加“dashjs=true”属性。
    1
    2
    <script src="https://media-cache.huaweicloud.com/video/hwplayer/1.4.0/lib/dash-2.9.2.all.min.js"></script>
    <script src="https://media-cache.huaweicloud.com/video/hwplayer/1.4.0/dist/hwplayer.js?dashjs=true"></script>
    

Step2:初始化播放器

播放器支持使用js方式和标签方式进行初始化,建议您优先选择js方式。
  • js方式(推荐方式)
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <video id="test" class="video-js vjs-default-skin vjs-big-play-centered"></video>
    <script>
        hwplayerloaded(function () {
            var options = {
                //是否显示控制栏,包括进度条,播放暂停按钮,音量调节等组件
                controls: true, 
                width: 640,
                height: 360,
            };
            var player = new HWPlayer('test', options, function () {
                //播放器已经准备好了
                player.src("https://35.cdn-vod.huaweicloud.com/asset/ba4f5df688f4ed6f569470d688ec4a22/c5d8003cb1d108035d3a902adb2bc5cc.mp4");
                // "this"指向的是HWPlayer的实例对象player
                player.play();
                // 使用事件监听
                player.on('ended', function () {
                //播放结束了
                });
            });
        });
    </script>
    

    this.src:请填写为在视频点播控制台视频直播控制台中获取的点播视频播放地址或直播播放地址。

    调用src方法时,除mp4格式的视频外,都需要标注视频类型。

    例如:视频播放url是一个m3u8的视频,则调用接口方法为player.src({src:url,type:"application/x-mpegURL"})。具体详情请参考播放器属性和接口中的src方法。

    视频格式和对应的type:

    • m3u8:application/x-mpegURL
    • mp4:video/mp4
    • flv:video/flv
    • mpd:application/dash+xml
    • rtmp:rtmp/flv
    HWPlayer构造函数接收如下参数:
    • id:video标签dom的id。
    • options:播放器的配置选项,具体配置项说明请参见表1
    • onready:播放器初始化完成后的回调函数,可使用this引用播放器的实例对象,如this.play(),this.pause(),this.on('ended')等操作。
  • 标签方式

    在<video>标签中加上class="video-js"和data-setup='{}'属性。其中,source src请填写为在视频点播控制台视频直播控制台中获取的点播视频播放地址或直播播放地址。

    1
    2
    3
    4
    5
    6
    <video id="test" 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="https://35.cdn-vod.huaweicloud.com/asset/ba4f5df688f4ed6f569470d688ec4a22/c5d8003cb1d108035d3a902adb2bc5cc.mp4" type="video/mp4">
    </video>
    <script>
         hwplayerloaded(function(){});
    </script>
    
    • data-setup:必选,若为空值,请填写data-setup='{}'。
    • hwplayerloaded:必选,加载播放器在hwplayerloaded方法触发时执行。

代码示例

  • js方式(MP4格式)
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
    <video id="test" class="video-js vjs-default-skin vjs-big-play-centered">
    </video>
    <!--[if lt IE 9]><script src="https://media-cache.huaweicloud.com/video/hwplayer/1.4.0/lib/video-js-5.20.5/ie8/videojs-ie8.min.js"></script><![endif]--><SCRIPT src="//media-cache.huaweicloud.com/video/hwplayer/1.4.0/dist/hwplayer.js"></SCRIPT>
    <script>
        hwplayerloaded(function () {
            var player = new HWPlayer('test', {
                controls: true,
                userId: 'playerDemo01',
                domainId: 'hwPlayer',
                width: 640,
                height: 360,
                playbackRates: [.5, 1, 1.5, 2]
            });
            player.src("https://35.cdn-vod.huaweicloud.com/asset/ba4f5df688f4ed6f569470d688ec4a22/c5d8003cb1d108035d3a902adb2bc5cc.mp4");
        });
    </script>
    </body>
    </html>
    
  • js方式(FLV格式)
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
    <video id="test" class="video-js vjs-default-skin vjs-big-play-centered">
    </video>
    <script src="https://media-cache.huaweicloud.com/video/hwplayer/1.4.0/lib/flv-1.4.2.min.js"></script>
    <script src="https://media-cache.huaweicloud.com/video/hwplayer/1.4.0/dist/hwplayer.js?flvjs=true"></script>
    <script>
        hwplayerloaded(function () {
            var player = new HWPlayer('test', {
                controls: true,
                userId: 'playerDemo01',
                domainId: 'hwPlayer',
                width: 640,
                height: 360,
                playbackRates: [.5, 1, 1.5, 2]
            });
             player.src({ 
                src: url, //视频地址
                type: 'video/flv' 
             });
        });
    </script>
    </body>
    </html>
    
  • 标签方式
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
    <video controls id="test" class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{"width":640,"height":360,"playbackRates":[0.5, 1, 1.5, 2]}'>
        <source src="https://35.cdn-vod.huaweicloud.com/asset/ba4f5df688f4ed6f569470d688ec4a22/c5d8003cb1d108035d3a902adb2bc5cc.mp4" type="video/mp4">
    </video>
    <!--[if lt IE 9]><script src="//media-cache.huaweicloud.com/video/hwplayer/1.4.0/lib/video-js-5.20.5/ie8/videojs-ie8.min.js"></script><![endif]--><SCRIPT src="//media-cache.huaweicloud.com/video/hwplayer/1.4.0/dist/hwplayer.js"></SCRIPT>
    <script>
        hwplayerloaded(function () {});
    </script>
    </body>
    </html>
    

    由于浏览器的跨域安全限制,以上代码无法在本地HTML文件上调试,请将需要调试的文件上传到服务器端再进行访问。

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!非常感谢您的反馈,我们会继续努力做到更好!
反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问