117 lines
4.4 KiB
HTML
117 lines
4.4 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet" />
|
||
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
|
||
<!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->
|
||
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/TXLivePlayer-1.2.3.min.js"></script>
|
||
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
|
||
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/hls.min.1.1.5.js"></script>
|
||
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
|
||
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/flv.min.1.6.3.js"></script>
|
||
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 DASH 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 dash.min.x.x.x.js。-->
|
||
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/dash.all.min.4.4.1.js"></script>
|
||
<!--播放器脚本文件-->
|
||
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
|
||
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>Document</title>
|
||
<style>
|
||
/* // // 播放按钮 */
|
||
#videoDeom::-webkit-media-controls-play-button {
|
||
display: none !important;
|
||
}
|
||
|
||
/* // 当前播放时间 */
|
||
#videoDeom::-webkit-media-controls-current-time-display {
|
||
display: none !important;
|
||
}
|
||
|
||
/* // 剩余时间 */
|
||
#videoDeom::-webkit-media-controls-time-remaining-display {
|
||
display: none !important;
|
||
}
|
||
|
||
/* // 音量按钮 */
|
||
#videoDeom::-webkit-media-controls-volume-control-container {
|
||
/* display: none !important; */
|
||
}
|
||
|
||
/* // 全屏 */
|
||
#videoDeom::-webkit-media-controls-fullscreen-button {
|
||
/* display: none !important; */
|
||
}
|
||
|
||
/* // 时间轴 */
|
||
#videoDeom::-webkit-media-controls-timeline {
|
||
/* display: none !important; */
|
||
}
|
||
|
||
/* // 更多选项 --然而并不生效 */
|
||
#videoDeom::-internal-media-controls-overflow-button {
|
||
display: none !important;
|
||
}
|
||
|
||
/* #videoDeom {
|
||
pointer-events: none;
|
||
} */
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
<!-- <video id="player-container-id" width="780" height="360" preload="auto" playsinliwebkit-playsinlinene
|
||
autoplay="autoplay" v-if="videoType == 'UAV'">
|
||
</video>
|
||
<video id="videoDeom" autoplay controls controlslist="nodownload" disablePictureInPicture
|
||
oncontextmenu="return false" v-else style="width: 95vw; height: 95vh;margin-left:2vw;object-fit: fill">
|
||
<source src="./audio/DJI_0042.MP4" type="video/mp4" />
|
||
</video> -->
|
||
<video id="player-container-id" width="780" height="360" preload="auto" playsinliwebkit-playsinlinene
|
||
autoplay="autoplay">
|
||
</video>
|
||
</div>
|
||
</body>
|
||
|
||
</html>
|
||
<script src="./js/vue.min.js"></script>
|
||
<script>
|
||
|
||
var vm = new Vue({
|
||
el: "#app",
|
||
data: {
|
||
videoType: 'VIDEO',
|
||
TCPlayerVideo:null
|
||
},
|
||
})
|
||
var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中一致
|
||
function childFunction() {
|
||
var flvStr = localStorage.getItem("flvStr")
|
||
console.log(flvStr)
|
||
if (flvStr == '17853305026') {
|
||
vm.videoType = 'VIDEO'
|
||
const videoDiv = document.getElementById('videoDeom')
|
||
videoDiv.load()
|
||
videoDiv.play()
|
||
const myDiv = document.getElementById('videoDeom')
|
||
console.log(myDiv)
|
||
myDiv.addEventListener("click", (event) => {
|
||
event.preventDefault();
|
||
});
|
||
} else {
|
||
console.log('UAV')
|
||
vm.videoType = 'UAV'
|
||
player.src(flvStr); // url 播放地址
|
||
}
|
||
}
|
||
function destroyVideo() {
|
||
// player.dispose()
|
||
player.pause()
|
||
// const videoDiv = document.getElementById('videoDeom')
|
||
// videoDiv.pause()
|
||
}
|
||
</script> |