使用 JS 的 html5 视频的优雅回退
Elegant fallback for html5 video using JS
我有一个 Django 网站,用户可以在其中上传视频供其他人播放。所有视频仅编码为 mp4 格式。在某些浏览器无法播放这种格式的情况下(例如 Firefox),我需要编写一个优雅的回退程序。对我来说,这是一个下载视频而不是流式传输视频的选项。
查看简单 example here,我尝试在我的 Django 模板中编写后备程序,但无济于事。也许 JS 片段需要调整?
下面是我的模板代码的基本内容。有人可以帮我解决这个问题吗?提前致谢。
{% extends "base.html" %}
{% block content %}
<div class="margin">
<table>
{% for video in object_list %}
<tr><td>
<a name="section{{ forloop.counter }}"></a>
<a href="{% url 'videocomment_pk' video.id %}">
{{ video.caption }}
<button>
Comment
</button>
</a>
<br>
<video width="500" height="350" controls autoplay>
<source src="{{ video.url }}" type='video/mp4; codecs="mp4v.20.8, samr"'>
<a href="{{ video.url }}">
<img src="xyz.jpg" title="Your browser does not support the <video> tag">
</a>
<p>Your browser does not support the <video> tag</p>
</video>
<br>
</td></tr>
{% endfor %}
</table>
<script>
var v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
var d = document.createElement('div');
d.innerHTML = v.innerHTML;
v.parentNode.replaceChild(d, v);
}, false);
</script>
</div>
<br>
{% endblock %}
{% block pagination %}
{% if is_paginated %}
<div class="pagination">
{% if page_obj.has_previous %}
<a href="?page={{ page_obj.previous_page_number }}#section0"><button>back</button></a>
{% endif %}
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}#section0"><button >forward</button></a>
{% endif %}
</div><br>
{% endif %}
{% endblock %}
一个问题可能是页面上有多个元素,但您从示例页面获取的 JS 代码仅初始化了第一个元素。
您应该使用 document.querySelectorAll('video')
并迭代每个视频元素。
编辑 - 像这个肮脏的代码片段这样的东西可以工作:
var videos = document.querySelectorAll('video');
for (var i = 0; i < videos.length; i++) {
var v = videos[i];
var sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
var d = document.createElement('div');
d.innerHTML = v.innerHTML;
v.parentNode.replaceChild(d, v);
}, false);
}
我有一个 Django 网站,用户可以在其中上传视频供其他人播放。所有视频仅编码为 mp4 格式。在某些浏览器无法播放这种格式的情况下(例如 Firefox),我需要编写一个优雅的回退程序。对我来说,这是一个下载视频而不是流式传输视频的选项。
查看简单 example here,我尝试在我的 Django 模板中编写后备程序,但无济于事。也许 JS 片段需要调整?
下面是我的模板代码的基本内容。有人可以帮我解决这个问题吗?提前致谢。
{% extends "base.html" %}
{% block content %}
<div class="margin">
<table>
{% for video in object_list %}
<tr><td>
<a name="section{{ forloop.counter }}"></a>
<a href="{% url 'videocomment_pk' video.id %}">
{{ video.caption }}
<button>
Comment
</button>
</a>
<br>
<video width="500" height="350" controls autoplay>
<source src="{{ video.url }}" type='video/mp4; codecs="mp4v.20.8, samr"'>
<a href="{{ video.url }}">
<img src="xyz.jpg" title="Your browser does not support the <video> tag">
</a>
<p>Your browser does not support the <video> tag</p>
</video>
<br>
</td></tr>
{% endfor %}
</table>
<script>
var v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
var d = document.createElement('div');
d.innerHTML = v.innerHTML;
v.parentNode.replaceChild(d, v);
}, false);
</script>
</div>
<br>
{% endblock %}
{% block pagination %}
{% if is_paginated %}
<div class="pagination">
{% if page_obj.has_previous %}
<a href="?page={{ page_obj.previous_page_number }}#section0"><button>back</button></a>
{% endif %}
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}#section0"><button >forward</button></a>
{% endif %}
</div><br>
{% endif %}
{% endblock %}
一个问题可能是页面上有多个元素,但您从示例页面获取的 JS 代码仅初始化了第一个元素。
您应该使用 document.querySelectorAll('video')
并迭代每个视频元素。
编辑 - 像这个肮脏的代码片段这样的东西可以工作:
var videos = document.querySelectorAll('video');
for (var i = 0; i < videos.length; i++) {
var v = videos[i];
var sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
var d = document.createElement('div');
d.innerHTML = v.innerHTML;
v.parentNode.replaceChild(d, v);
}, false);
}