Php 如何使用HTML5播放m3u8(文件)视频<;视频>;元素?
我遇到了这个stackoverflow链接,其中谈到了播放m3u8文件: 我尝试过做一些类似的事情来播放m3u8文件中的视频链接,如在phpFIDLE上:Php 如何使用HTML5播放m3u8(文件)视频<;视频>;元素?,php,html,html5-video,Php,Html,Html5 Video,我遇到了这个stackoverflow链接,其中谈到了播放m3u8文件: 我尝试过做一些类似的事情来播放m3u8文件中的视频链接,如在phpFIDLE上: echo '<video width="352" height="198" controls> <source src="https://udemy-adaptive-streaming-prod.udemy.com/9287/72689/2012-04-30_04-09-49-f5ad53b1736807ee7f8
echo '<video width="352" height="198" controls>
<source src="https://udemy-adaptive-streaming-prod.udemy.com/9287/72689/2012-04-30_04-09-49-f5ad53b1736807ee7f8837b37115aeeb/hls/677cda5a7077be8d22348b5edebd77db.m3u8?sign=%252BCIehx2LKCxUcNSU33mWdfm5SbA%253D&mign=EEsJDxEabAoMa1kFRgIfbEkIDw8RHGwKDGtZXAFYS3lHSwgIGEoJUl57U1sfTBQlBTYIFRkNEVlZfVtaAl5Dc15fAQ==&quality=HD" type="application/x-mpegURL"></video>';
echo'
';
但它不起作用。它似乎显示了视频元素,但视频没有加载到其中。可以这样播放m3u8文件吗?我要播放的m3u8文件位于“https://www.udemy.com/excel-tutorial/
感谢您的帮助。m3u8文件是一个HLS清单,它支持自适应流。要播放HLS流,您需要找到一个HLS视频播放器,以便在每个浏览器上播放跨设备的视频。您甚至可以自己构建一个,例如使用JavaScript
或者,您可以(通常缺少功能),或者使用商业HLS播放器,如。使用JavaScript HLS client HLS.js包,该包位于。由许多已建立的组织使用。适用于所有浏览器 快速示例页面:
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video" controls></video>
<script>
if(Hls.isSupported())
{
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('playlist.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function()
{
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl'))
{
video.src = 'playlist.m3u8';
video.addEventListener('canplay',function()
{
video.play();
});
}
</script>
</body>
</html>
如果(Hls.isSupported())
{
var video=document.getElementById('video');
var hls=新的hls();
hls.loadSource('playlist.m3u8');
附件媒体(视频);
on(hls.Events.MANIFEST_已解析,函数()
{
video.play();
});
}
else if(video.canPlayType('application/vnd.apple.mpegur'))
{
video.src='playlist.m3u8';
video.addEventListener('canplay',function()
{
video.play();
});
}
将“playlist.m3u8”替换为您的播放列表。通常,html5视频播放器将直接支持mp4、WebM、3gp和OGV格式
<video controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
我们可以在web应用程序中添加一个外部HLS js脚本
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your title</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto"
data-setup='{}'>
<source src="https://cdn3.wowza.com/1/ejBGVnFIOW9yNlZv/cithRSsv/hls/live/playlist.m3u8" type="application/x-mpegURL">
</video>
<script>
var player = videojs('my_video_1');
player.play();
</script>
</body>
</html>
你的头衔
var player=videojs(“我的视频1”);
player.play();
希望这有用