首页 > 网站建设 > 阿里云HTML5+Flash视频播放器web端
2019
06-09

阿里云HTML5+Flash视频播放器web端

最近弄一个项目,需要在网页里面播放视频,Flash视频在谷歌和火狐浏览器下需要开启Flash控件,所以打算使用HTML5,考虑到老旧浏览器不支持HTML5,所以考虑使用HTML5和Flash共存,优先HTML5,不支持HTML5自动切换到Flash。网上找了很多,最后发现阿里云有提供,此处只写自己地址的案列,如果使用阿里云的视频点播云会更好,按VID读取,但是会涉及阿里云的存储、转码、流量等费用。

Flash 模式: 

视频格式:mp4、flv、m3u8、rtmp 

视频编码:H.264 

音频编码:AAC、MP3 

音频格式:MP3 

HTML5 模式: 

视频格式:mp4、m3u8、flv 

视频编码:H.264 

音频编码:AAC 

音频格式:mp3


如何使用:

不依赖于任何的前端js库,只需要在页面中引用如下js文件,就可以进行播放器的初始化,如果出现文本乱码,可以添加script引用标签添加charset属性,值为”utf-8”比如:charset=”utf-8”:

https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js

这个文件同时包含了Flash和Html5跨终端自适应的逻辑。如果您只是想使用其中一种播放技术,也可以只引用对应技术的js文件,从而获得更小的文件体积:

Flash版本:

https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-flash-min.js

HTML5版本:

https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js

如果您的使用场景需要用到html5播放器,请额外引用css文件:

https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css

列示代码如下:

<!DOCTYPE html>
<html>
    <head>
     <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
    </head>
</html>

播放器简单使用代码如下:

<!DOCTYPE html>
<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
     <title>用户测试用例</title>
     <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
    </head>
    <body>
        <div  class="prism-player" id="J_prismPlayer"></div>
        <script>
            var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            autoplay: true,
            //支持播放地址播放,此播放优先级最高
            source : '播放url',
            //播放方式二:点播用户推荐
            vid : '1e067a2831b641db90d570b6480fbc40',
            playauth : 'ddd',
            cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',            
            //播放方式三:仅MPS用户使用
            vid : '1e067a2831b641db90d570b6480fbc40',
            accId: 'dd',
            accSecret: 'dd',
            stsToken: 'dd',
            domainRegion: 'dd',
            authInfo: 'dd',
            //播放方式四:使用STS方式播放
            vid : '1e067a2831b641db90d570b6480fbc40',
            accessKeyId: 'dd',
            securityToken: 'dd',
            accessKeySecret: 'dd',
             region:'cn-shanghai',//eu-central-1,ap-southeast-1
            },function(player){
                console.log('播放器创建好了。')
           });
        </script>
    </body>
</html>



本文》有 0 条评论

留下一个回复