Django播放m3u8格式网络视频（videojs）

最新推荐文章于 2023-08-30 12:01:04 发布

佐倉

最新推荐文章于 2023-08-30 12:01:04 发布

阅读量2.2k

点赞数

分类专栏： Django python

本文链接：https://blog.csdn.net/qq_38641985/article/details/108434336

版权

python 同时被 2 个专栏收录

194 篇文章 5 订阅

订阅专栏

Django

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>videoJs</title>
 
		  <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
		
		  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
		  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    </head>
    <body>
        <section id="videoPlayer">
            <video id="my-video"  style="clear:both;display:block;margin:auto;width:100%;" width="1280" height="720" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
                <source src="https://2.mhbobo.com/20190817/Af9HE9N9/index.m3u8" type="application/x-mpegURL" id="target"> 
 
            </video>
        </section>
		  <script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
        <script type="text/javascript">
            var player = videojs('my-video', { "poster": "", "controls": "true" }, function() {
                this.on('play', function() {
                    console.log('正在播放');
                });

                this.on('pause', function() {
                    console.log("暂停中")
                });
         
                this.on('ended', function() {
                    console.log('结束');
                })
 
            });
        </script>
    </body>
</html>
参考资料

video.html

<!DOCTYPE html><html lang="ja">
<head>
<title>{{context.title}}</title>
	<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />	
	<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
	<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

<h3 align="center">欢迎访问樱花视频网站！</h3>
<style type="text/css">
<!--
.page{
	text-align:center;
	margin-top: 50px;
}
.page a{
	text-decoration:none;
	border:1px solid black;
	padding: 5px 7px;
	color: blue;
}
p{
	font-size:8px;
	text-align:left;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:4; 
	-webkit-box-orient: vertical;
	}
-->
</style>
</head>
<body>
<div class="page">
<span><a href="/video/{{context.current_page | add:"-1"}}">上一页</a></span>
{% if context.page_list %}
	{% for pg in context.page_list %}
		<a href="/video/{{pg}}"> {{pg}} </a>
	{% endfor %}
{% endif %}
<span><a href="/video/{{context.current_page | add:"1"}}">下一页</a></span>
</div>
<br>
<div>
	{% if context.data %}
		{% for li in context.data %}
			<div style="float:left;width:33.33%;">
						<div>
							<section id="videoPlayer">
								<video id="my-video-{{li.id}}" width="400" height="300" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster=""  data-setup="{}">
									<source src="{{li.address}}" type="application/x-mpegURL" id="target"> 
								</video>
							</section>	
							<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
								<script type="text/javascript">
								var player = videojs('my-video-{{li.id}}', { "poster": "", "controls": "false" , }, function() {
								this.on('play', function() {
										
									window.document.title="{{li.title}}";
									console.log(window.document.title);
									console.log('正在播放');
										});
									//暂停--播放完毕后也会暂停
									this.on('pause', function() {
									console.log("暂停中")
											});
											// 结束
									this.on('ended', function() {
									console.log('结束');
											})
							 
										});

							</script>					
						</div>

					<div >
				
						<p>
							名前:{{li.title}}
						<br> 
							メール:{{li.address}}
						<br> 
							時間:{{context.time | date:"H:i:s"}}
						<br> 
						    id:{{li.id}}
						<br> 
						</p>
				    </div>	

			</div>	
	{% empty %}
		<li>no!</li>
		{% endfor %}
	{% endif %}
</div>

<div>
{%load mydigit%}
<h5 align="right">当前页数：{{context.current_page}}</h5>
<h5 align="right">总页数：{{context.pages }}</h5>
<h5 align="right">总数量：{{context.num | mydigit:4}}</h5>
<h5 align="right"> 时间：{{context.time | date:"Y-m-d H:i:s" }}</h5> 
</div>

</body>
</html>

views.py

def video_pages(request,page=1):
    page=int(page)
    set_video_num=15
    template=loader.get_template("video.html")
    all_list=Video.objects.all()#读取数据库信息
    
    if (page<=0):
        url="http://127.0.0.1:8000/video/"
        return HttpResponseRedirect(url)

    if(len(all_list)<(page-1)*set_video_num+1):
        url="http://127.0.0.1:8000/video/"
        return HttpResponseRedirect(url)

    data_list=[]
    for i in range((page-1)*set_video_num,page*set_video_num):
        data_list.append(all_list[i])

    if(len(data_list)%set_video_num==0):
        pages=len(all_list)/set_video_num
    else:
        pages=len(all_list)/set_video_num + 1

    context={"title":"Player！","time":datetime.datetime.now(),"data":data_list,"num":len(all_list),"pages":pages,"current_page":page,"page_list":list(range(1,pages+1))}
    request_context = RequestContext(request, context)
    request_context.push(locals())
    html=template.render(context=locals(), request=request)
    return HttpResponse(html)

网站预览示例
在这里插入图片描述
数据库信息预览

访问网址：127.0.0.1:8000/video/1

urlpatterns = [
    url(r"^video/(?P<page>\d+)/$", views.video_pages),
    ]

问题：

var player = videojs('my-video’, { "poster": "", "controls": "false" , }, function()）
videojs不能被多次实例化，视频显示失败（添加模板变量后缀）
var player = videojs('my-video-{{li.id}}', { "poster": "", "controls": "false" , }, function()）
仍旧会有问题（警告），但功能正常

在这里插入图片描述
完整项目

佐倉

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Django播放m3u8格式网络视频（videojs）

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>videoJs</title> <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" /> <!-- If you'd lik
复制链接

扫一扫