Hi,为确保您的账号安全,请大家修改登陆密码为包含大小写字母、标点、数字的复合密码,不要使用过于简单的登陆密码。
您当前的位置:首页 :: PHP

laravel之阿里云直播点播视频播放篇

时间:2018-01-17 14:20:16  来源:  作者:

之前讲过 <<laravel之阿里云视频点播篇>> <<laravel之阿里云视频直播篇>>

直播视频与点播视频最大的不同就是播放地址
点播需要播放凭证,直播需要拉流地址与地址的签名,当然不进行签名也是可以的

先说点播视频播放,直接去下载阿里的播放器地址https://help.aliyun.com/document_detail/57314.html?spm=5176.doc57294.6.607.59ds4d

播放器SDK 地址及使用方法https://help.aliyun.com/document_detail/51991.html?spm=5176.doc57314.2.6.K5Geik

在需要播放的页面加入CSS

{!! Html::style('//g.alicdn.com/de/prismplayer/1.9.9/skins/default/index.css') !!}

引入JS

<script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.3.5/aliplayer-min.js"></script>

我这里使用的是1.9.9版的,当然你最好使用最新版的,我的只是个参照
因为我使用的是bootstrap3 框架, 所以在后台有视频预览的功能,那么我们做一个弹窗来播放视频, 样子如下:

96ff37b62453b59b325b3335a684a262.png

60f793cba4617c04434c2c32c564516f.png

 

网页里加入bootstrap3 框架弹窗代码与对应的CSS

<div class="modal fade" id="playerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <div class="modal-body"></div>
        </div>
    </div>
</div>

CSS

#playerModal .modal-content {
    padding: 0px;
}

#playerModal .modal-content .modal-body {
    padding: 0px;
}

#playerModal .modal-content button.close {
    position: absolute;
    z-index: 888;
    color: #FFF;
    top: 2px;
    right: 10px;
}

JS核心code:

<script type="text/javascript">
	$(document).ready(function () {
		var upvupplayer;
        $('.upvupplayer').click(function () {
            var videoid = $(this).data('videoid'), playauth;
            //console.log(videoid);
            $.ajax({
                async: false,
                type: 'post',
                dataType: 'json',
                url: '/vod/playauth', //这个是拿播放凭证的地址,在laravel之阿里云视频点播篇 里有讲到
                data: {videoid: videoid},
                error: function () {
                    //notifyFailed();
                },
                success: function (res) {
                    if (res.status > 0) {
                        //notify("提示", res.msg, {type: "warning"});
                    } else {
                        playauth = res.data;
                    }
                }
            });
            $('#playerModal .modal-body').html('<div class="prism-player" id="J_prismPlayer" style=""></div>');
            $('#playerModal').modal('show');
            //这里需要注意一下,如果你用最新版的阿里播放器应该是 new Aliplayer({}) 而不是下面的这个,里面的参数是一样,具体请看帮助文档
            upvupplayer = new prismplayer({
                id: 'J_prismPlayer',
                width: '100%',
                height: '400px',
                autoplay: true,
                //支持播放地址播放,此播放优先级最高
                //source : '播放url',
                //播放方式二:推荐
                vid: videoid,
                playauth: playauth.PlayAuth,
                //cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png'
            });
        });
        $('.close').click(function () {
            $('#J_prismPlayer').remove();
            upvupplayer = null;
        });
	});
</script>

点播放基本就完成了

那么直播如下,上核心代码 播放器陪分

$('.upvupplayer').click(function(){
	var videoid = $(this).data('videoid');
	var id = $(this).data('id');
	$.ajax({
	    type:'post',
	    dataType:'json',
	    url:'/live/playauth', //这个是拿直接地址的链接 路径换成自己的
	    data:{id:id,videoid:videoid},
	    error:function(){
	        //$.toast("无法连接网络,请稍候重试");
	    },
	    success:function(res){
	        if(res.status>=1){
	            //$.toast(res.msg);
	            return'';
	        }
	        var upvupplayer = new Aliplayer({
	            id: "J_prismPlayer",
	            autoplay: true,
	            isLive:res.data.isLive ? true : false, //是不是直播
	            width: "100%",
	            height:'234px',
	            vid: res.data.videoId, //直播放或视频ID
	            playauth: res.data.PlayAuth, //播放凭证
	            cover: res.data.Image, //封面图片
	            source: res.data.Source, //live 视频地址
	        });
	    }
	});
});

 已经代码是改版过来的,以实际开发项目里的代码变量为准!

举报
收藏0次 / 评论0
评论(0)
还可以输入 2000 个字符
还可以输入 2000 个字符
取消回复
举报×

还可以输入 264 字符

收藏(0)×