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> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0