mpegts播放直播视频示例代码
代码语言:html
所属分类:多媒体
代码描述:mpegts播放直播视频示例代码,可以设置是否直播流、媒体数据、播放、跳转、操作日志错误等信息。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <style> .mainContainer { display: block; width: 100%; margin-left: auto; margin-right: auto; } @media screen and (min-width: 1152px) { .mainContainer { display: block; width: 1152px; margin-left: auto; margin-right: auto; } } .video-container { position: relative; margin-top: 8px; } .video-container:before { display: block; content: ""; width: 100%; padding-bottom: 56.25%; } .video-container > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .video-container video { width: 100%; height: 100%; } .urlInput { display: block; width: 100%; margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: 8px; } .centeredVideo { display: block; width: 100%; height: 100%; margin-left: auto; margin-right: auto; margin-bottom: auto; } .controls { display: block; width: 100%; text-align: left; margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: 10px; } .logcatBox { border-color: #CCCCCC; font-size: 11px; font-family: Menlo, Consolas, monospace; display: block; width: 100%; text-align: left; margin-left: auto; margin-right: auto; } .url-input , .options { font-size: 13px; } .url-input { display: flex; } .url-input label { flex: initial; } .url-input input { flex: auto; margin-left: 8px; } .url-input button { flex: initial; margin-left: 8px; } .options { margin-top: 5px; } .hidden { display: none; } </style> </head> <body> <div class="mainContainer"> <div> <div id="streamURL"> <div class="url-input"> <label for="sURL">Stream URL:</label> <input id="sURL" type="text" value="http://127.0.0.1/flv/7182741-1.flv" /> <button onclick="switch_mds()">Switch to MediaDataSource</button> </div> <div class="options"> <input type="checkbox" id="isLive" onchange="saveSettings()" checked /> <label for="isLive">isLive</label> <input type="checkbox" id="withCredentials" onchange="saveSettings()" /> <label for="withCredentials">withCredentials</label> <input type="checkbox" id="liveBufferLatencyChasing" onchange="saveSettings()" checked /> <label for="liveBufferLatencyChasing">liveBufferLatencyChasing</label> </div> </div> <div id="mediaSourceURL" class="hidden"> <div class="url-input"> <label for="msURL">MediaDataSource JsonURL:</label> <input id="msURL" type="text" value="http://127.0.0.1/flv/7182741.json" /> <button onclick="switch_url()">Switch to URL</button> </div> </div> </div> <div class="video-container"> <div> <video name="videoElement" class="centeredVideo" controls autoplay> Your browser is too old which doesn't support HTML5 video. </video> </div> </div> <div class="controls"> <button onclick="player_load()">Load</button> <button onclick="player_start()">Start</button> <button onclick="player_pause()">Pause</button> <button onclick="player_destroy()">Destroy</button> <input style="width:100px" type="text" name="seekpoint"/> <button onclick="player_seekto()">SeekTo</button> </div> <textarea name="logcatbox" class="logcatBox" rows="10" readonly></textarea> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mpegts.js"></script> <script> var checkBoxFields = ['isLive', 'withCredentials', 'liveBufferLatencyChasing']; var streamURL, mediaSourceURL; function player_load() { console.log('isSupported: ' + mpegts.isSupported()); if (mediaSourceURL.className === '') { var url = document.getElementById('msURL').value; var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onload = function (e) { var mediaDataSource = JSON.parse(xhr.response); player_load_mds(mediaDataSource); } xhr.send(); } else { var i; var mediaDataSource = { type: 'mse' }; for (i = 0; i < checkBoxFields.length; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0