代码拉取完成，页面将自动刷新
实现网页播放功能，需要以下两个步骤：
参考如下内容，可以快速实现网页播放的功能。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video Demo</title>
<link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/video-js.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.2/video.min.js"></script>
<style>
body { background-color: #191919; }
</style>
</head>
<body>
<video id="my-video" class="video-js" controls=false preload="auto" width="960" height="400" data-setup="{}">
<source type="application/x-mpegURL" id="my-video-source"
src="http://47.106.222.25:3700/uuid/play?uuid=293EEE9DKXTF&appid=823&init_str=EEGDFHBIKAJNGBJNEMGNFPECHPNFHGNMGCFEBOCGAAJHLNKJDJAPCEPMGHLGJBLNAJMOKCDKONMDBJCCJHMD&p2p_id=TANGE-389410-LZXBB,PLNFZC&password=awNBR7skhVESMBv6UCv8i6ckMe0a1YJZ&×tamp=1610445481&sign=488aa72de2f0bfb30b1793bf247a4832">
</video>
<script type="text/javascript">
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<title>Tange WebPlayer Demo</title>
<style>
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.video-container {
background-color: #111;
width: calc(100vw * 0.8);
height: calc(100vw * 0.8 * 9/16);
display: block;
margin-left: auto;
margin-right: auto;
padding-right: 0;
}
</style>
</head>
<body>
<canvas class="video-container" id="canvas" />
<!-- tange-player.min.js与librender.wasm需放在同一个目录 -->
<script src="/libs/web/tange-player/tange-player.min.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
// 读取'/device/access_info'接口的device_str字段数据，获取到设备信息
const deviceString = window.location.search || "uuid=293EEE9DKXTF&appid=823&init_str=EEGDFHBIKAJNGBJNEMGNFPECHPNFHGNMGCFEBOCGAAJHLNKJDJAPCEPMGHLGJBLNAJMOKCDKONMDBJCCJHMD&p2p_id=TANGE-389410-LZXBB,PLNFZC&password=awNBR7skhVESMBv6UCv8i6ckMe0a1YJZ&×tamp=1610445481&sign=488aa72de2f0bfb30b1793bf247a4832";
// 支持从url, searchString或device_str参数获取websocket视频的播放参数
const wsPlayParams = TangeWebPlayer.utils.getWsPlayParamsFromUrl(deviceString);
console.log(wsPlayParams);
/* wsPlayParams对象数据示例
const mockWsPlayParams = {
uuid: "293EEE6GF3TB",
appid: "657",
initstring: "XXXX",
p2pid: "CNSIMC-000591-PDBDV,KUHJLB",
password: "XXXX",
stream: 1, // 需数字类型
};
*/
// 初始化播放器
TangeWebPlayer.init();
// 等待播放器依赖库下载与准备完毕
TangeWebPlayer.ready().then(function () {
// 初始化播放器实例
const player = new TangeWebPlayer({
url: "ws://h265.tange365.com:8888/media",
// websocket方式的播放参数
wsPlayParams: wsPlayParams,
videoContainer: document.getElementById("canvas"),
});
// 开始播放
player.play();
/* 停止播放
document.getElementById("stopPlayer").addEventListener("click", () => {
player.stop();
});
*/
});
});
</script>
</body>
</html>
注意点：
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。