Question

我希望将视频放在HTML5页面中，该页面将在页面加载时开始播放，一旦完成，就会不间断地循环回到开头。该视频还应 NOT 与其关联的任何控件，并且与所有“现代”浏览器兼容，或者可以选择填充。

以前我会通过Flash和FLVPlayback完成此操作，但我更倾向于避开HTML5领域中的Flash。我想我可以使用javascript的setTimeout来创建一个平滑的循环，但我应该用什么来嵌入视频呢？那里有什么东西可以像FLVPlayback那样流式传输视频吗？

Answer 1

循环属性应该这样做：

<video width="320" height="240" autoplay loop>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

如果你对循环属性有问题（就像我们过去一样），请听一下videoEnd事件，并在它触发时调用play()方法。

注1：我不确定Apple的iPad / iPhone上的行为，因为它们对autoplay有一些限制。

注2：不推荐使用loop="true"和autoplay="autoplay"

Answer 2

从2018年4月开始，Chrome浏览器（以及其他几种主要的浏览器）现在也require的muted属性。

因此，您应该使用

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
</video>

Answer 3

您可以通过以下两种方式执行此操作：

1）在视频元素中使用origin/master属性（在第一个答案中提到）：

2）您可以使用loop媒体事件：

ended

Answer 4

对于iPhone，如果您还添加了playinline，则可以正常运行，

def ViewForm():
global tree
TopViewForm = Frame(viewform, width=600, bd=1, relief=SOLID)
TopViewForm.pack(side=TOP, fill=X)
LeftViewForm = Frame(viewform, width=600)
LeftViewForm.pack(side=LEFT, fill=Y)
MidViewForm = Frame(viewform, width=600)
MidViewForm.pack(side=RIGHT)
lbl_text = Label(TopViewForm, text="View Products", font=('arial', 18), width=600)
lbl_text.pack(fill=X)
lbl_txtsearch = Label(LeftViewForm, text="Search", font=('arial', 15))
lbl_txtsearch.pack(side=TOP, anchor=W)
search = Entry(LeftViewForm, textvariable=SEARCH, font=('arial', 15), width=10)
search.pack(side=TOP,  padx=10, fill=X)
btn_search = Button(LeftViewForm, text="Search", command=Search)
btn_search.pack(side=TOP, padx=10, pady=10, fill=X)
btn_reset = Button(LeftViewForm, text="Reset", command=Reset)
btn_reset.pack(side=TOP, padx=10, pady=10, fill=X)
btn_delete = Button(LeftViewForm, text="Delete", command=Delete)
btn_delete.pack(side=TOP, padx=10, pady=10, fill=X)
scrollbarx = Scrollbar(MidViewForm, orient=HORIZONTAL)
scrollbary = Scrollbar(MidViewForm, orient=VERTICAL)
tree = ttk.Treeview(MidViewForm, columns=("ProductID", "Product Name", "Product Qty", "Product Price"), selectmode="extended", height=100, yscrollcommand=scrollbary.set, xscrollcommand=scrollbarx.set)
scrollbary.config(command=tree.yview)
scrollbary.pack(side=RIGHT, fill=Y)
scrollbarx.config(command=tree.xview)
scrollbarx.pack(side=BOTTOM, fill=X)
tree.heading('ProductID', text="ProductID",anchor=W)
tree.heading('Product Name', text="Product Name",anchor=W)
tree.heading('Product Qty', text="Product Qty",anchor=W)
tree.heading('Product Price', text="Product Price",anchor=W)
tree.column('#0', stretch=NO, minwidth=0, width=0)
tree.column('#1', stretch=NO, minwidth=0, width=0)
tree.column('#2', stretch=NO, minwidth=0, width=200)
tree.column('#3', stretch=NO, minwidth=0, width=120)
tree.column('#4', stretch=NO, minwidth=0, width=120)
tree.pack()
DisplayData()

在HTML5中播放无限循环视频

4 个答案: