如何为html5动态视频提供正确的格式？
当使用以下函数将视频动态加载到画布上时，我试图找到一种提供正确视频格式的方法（我的视频以 h264 和 webm 编码）：
function loadVideo(video_path){
var ctx = document.getElementById('c').getContext('2d');
var vid = document.getElementById('v');
vid.src = video_path;
vid.load();
// play the video once it has loaded
vid.addEventListener('canplay', function(e){
vid.style.display = "block";
vid.play();
}, false);
// hide the video container once the video has finished playing
vid.addEventListener('ended', function(e){
vid.style.display = "none";
}, false);
}
这是 body 内的简单 html 标签：
<video id="v" type="video/webm" width="960" height="500"></video>
<canvas id="c"></canvas>
我可以沿着用户代理嗅探路线给我正确的 video_path 字符串，但是有没有更优雅的方法？
I'm trying to find a way to serve the correct video format (I have my videos encoded in h264 and webm ) when the videos are loaded dynamically onto a canvas using the function below:
function loadVideo(video_path){
var ctx = document.getElementById('c').getContext('2d');
var vid = document.getElementById('v');
vid.src = video_path;
vid.load();
// play the video once it has loaded
vid.addEventListener('canplay', function(e){
vid.style.display = "block";
vid.play();
}, false);
// hide the video container once the video has finished playing
vid.addEventListener('ended', function(e){
vid.style.display = "none";
}, false);
}
Here is the simple html inside the body tag:
<video id="v" type="video/webm" width="960" height="500"></video>
<canvas id="c"></canvas>
I could go down the user agent sniffing route to give me the correct video_path string but is there a more elegant way?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Modernizr 是检测浏览器功能的好方法。它还告诉您视频应采用什么格式：http://www.modernizr.com/docs/
Modernizr is a nice way to detect browser features. It also tells you what format the video should have: http://www.modernizr.com/docs/